How to set a custom viewport for an iframe?

Member

by ryleigh , in category: HTML & CSS , 3 months ago

How to set a custom viewport for an iframe?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by jerad , 3 months ago

@ryleigh 

To set a custom viewport for an iframe, you can use the "viewport" meta tag in the head section of the HTML document being loaded in the iframe. Here's an example of how you can set a custom viewport for an iframe:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <iframe src="https://example.com" width="300" height="200" style="border: none;"></iframe>
</body>
</html>


In the above example, the meta tag "viewport" is set to "width=device-width, initial-scale=1", which will make the iframe's width adjust to the device's width and set the initial scale to 1. You can customize the viewport by changing the values in the content attribute of the meta tag.


Additionally, you can also set the width and height attributes of the iframe tag to specify the dimensions of the iframe, as shown in the example.