When I run a new page, I must specify size of the viewport using the `setViewport` function:

	await page.setViewport({
		width: 1920,
		height: 1080
	})

I want use max viewport.

How can I make the viewport resizable according to the window size?

How to set max viewport in Puppeteer?

How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page is resized? I need to make an IFRAME size into this space (coming in a little on each margin).

For those who don&#39;t know, the browser viewport is not the size of the document/page. It is the visible size of your window before the scroll.


Using jQuery To Get Size of Viewport

I&#39;ve created a few responsive sites but am rather new to responsive site development. In my CSS 99% of my values are in ems or percentages. I am using media queries (both max-width and max-device-width) to make layout changes. I have not included a viewport meta tag and it works perfectly on iOS, a number of Android phones and tablets that I tested on, and all desktop browsers. 

Adding a meta tag breaks my site. Am I doing something wrong, or doing something right so that I don&#39;t need to include it? I&#39;m confused as to why it seems to be a best practice, as it&#39;s breaking my stuff.

Am I missing something?

Is the viewport meta tag really necessary?

How do I get the viewport height in ReactJS? In normal JavaScript I use

    window.innerHeight()
but using ReactJS, I&#39;m not sure how to get this information. My understanding is that

    ReactDOM.findDomNode()
only works for components created. However this is not the case for the `document` or `body` element, which could give me height of the window.

Get viewport/window height in ReactJS

I&#39;ve built a responsive site using Twitter Bootstrap here: http://zarin.me/cce/

The responsive design works great on iPad and iPhone, however when I flip the device from portrait to landscape, the site is zoomed in instead of adapting to the screen (pinching the screen works). 

What am I missing? Is this a viewport issue? Here&#39;s the only viewport code I have in my &lt;head&gt;:

    &lt;meta content=&quot;width=device-width, initial-scale=1.0&quot; name=&quot;viewport&quot;&gt;

Thanks in advance!

Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone

I am building a website specifically for mobile devices. There is one page in particular which is best viewed in landscape mode. 

Is there a way to detect if the user visiting that page is viewing it in Portrait mode and if so, display a message informing the user that the page is best viewed in landscape mode? If the user is already viewing it in landscape mode then no message will appear.

So basically, I want the site to detect the viewport orientation, if orientation is **Portrait**, then display an alert message advising the user that this page is best viewed in **Landscape** mode.

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

Or better yet, the viewport size of the browser with JavaScript? See green area here:

[![][1]][1]


  [1]: http://i.stack.imgur.com/zYrB7.jpg

How to get the browser viewport dimensions?

I&#39;ve update my iPhone 6 plus to iOS 10 beta version and just found that in mobile safari, you can zoom any webpages by double tapping or pinching **IGNORE** the `user-scalable=no` code in the meta tag. I don&#39;t know whether it&#39;s a bug or feature. If it&#39;s considered as a feature, how do we disable viewport zooming iOS 10 safari ?

----------
updated on iOS 11/12 release, iOS 11 and iOS 12 safari still DO **NOT** respect the `user-scalable=no` meta tag.

[![mobile github site on Safari][1]][1]


  [1]: https://i.stack.imgur.com/uVrdO.gif

disable viewport zooming iOS 10+ safari?

I am trying to create a canvas element that takes up 100% of the width and height of the viewport. 

You can see in my example [here][1] that is occurring, however it is adding scroll bars in both Chrome and FireFox.  How can I prevent the extra scroll bars and just provide exactly the width and height of the window to be the size of the canvas?


  [1]: http://jsfiddle.net/mqFdk/

HTML5 Canvas 100% Width Height of Viewport?

I have a website [here](http://02b23fa.netsolhost.com/wordpress1/).

Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the `body` has `overflow-x:hidden`.  

In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page.  As far as I can tell, this whitespace isn&#39;t even a part of the `html` or `body` tags. 

Even if I set the viewport to a specific width in the `&lt;head&gt;`:

    &lt;meta name=&quot;viewport&quot; content=&quot;width=1100, initial-scale=1&quot;&gt;

The site expands to the 1100px but still has the whitespace beyond the 1100.  

What am I missing?  How do I keep the viewport to 1100 and cut off the overflow?

Overflow-x:hidden doesn&#39;t prevent content from overflowing in mobile browsers

I&#39;m having trouble finding documentation for this. Is it Safari specific?

There was a recent bug in iOS 9 ([here][1]), the solution to which is adding `shrink-to-fit=no` to the viewport meta. 

What does this code do?


  [1]: http://kihlstrom.com/2015/shrink-to-fit-no-fixes-zoom-problem-in-ios-9/

What does the shrink-to-fit viewport meta attribute do?

What&#39;s the proper way to get the position of an element on the page relative to the viewport (rather than the document). [`jQuery.offset`][1] function seemed promising:

&gt; Get the current coordinates of the first element, or set the
&gt; coordinates of every element, in the set of matched elements, relative
&gt; to the document.

But that&#39;s relative to the document. Is there an equivalent method that returns offsets relative to the viewport?


  [1]: http://api.jquery.com/offset/

Using jquery to get element&#39;s position relative to viewport

I am writing a site using jquery that repeatedly calls `$(window).width()` and `$(window).height()` to position and size elements based on the viewport size.

In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated calls to the above jquery functions when the viewport is not resized.

Wondering if there is any special case anyone knows of when this happens, or if this is just the way it is. The difference in sizes reported are 20px or less, it appears. It happens in Safari 4.0.4, Firefox 3.6.2 and Chrome 5.0.342.7 beta on Mac OS X 10.6.2. I didn&#39;t test other browsers yet because it doesn&#39;t appear to be specific to the browser. I was also unable to figure out what the difference depends upon, if it isn&#39;t the viewport size, could there be another factor that makes the results differ?

Any insight would be appreciated.

___

update:

It is not the values of `$(window).width()` and `$(window).height()` that are changing. It&#39;s the values of the variables I am using to store the values of the above. 

It is not scrollbars that are afecting the values, no scrollbars appear when the variable values change. Here is my code to store the values in my variables (which I am doing just so they are shorter).

(all this is within `$(document).ready()`)

//initially declare the variables to be visible to otehr functions within `.ready()`


    var windowWidth = $(window).width(); //retrieve current window width
    var windowHeight = $(window).height(); //retrieve current window height
    var documentWidth = $(document).width(); //retrieve current document width
    var documentHeight = $(document).height(); //retrieve current document height
    var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position
    
    
    function onm_window_parameters(){ //called on viewer reload, screen resize or scroll
    
    	windowWidth = $(window).width(); //retrieve current window width
    	windowHeight = $(window).height(); //retrieve current window height
    	documentWidth = $(document).width(); //retrieve current document width
    	documentHeight = $(document).height(); //retrieve current document height
    	vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    	hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position
    	
    }; //end function onm_window_parameters()


I inserted an alert statement to probe the variables above against the values they are supposed to be holding. The `$(item).param()` values stay consistent, but my variables change for reasons I can&#39;t figure out.

I have looked for places where my code might be altering the value of the variables in question, as opposed to just retrieving their set values and can find none. I can post the whole shebang somewhere if that&#39;s a possibility.



jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I have an AJAX app built for mobile Safari browser that needs to display different types of content.

For some content, I need `user-scalable=1` and for other ones, I need `user-scalable=0`.

Is there a way to modify the value of the content attribute without refreshing the page?

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;&quot; /&gt;

Can I change the viewport meta tag in mobile safari on the fly?

I&#39;m using the Google Maps JavaScript API V3 and [the official examples](http://code.google.com/apis/maps/documentation/javascript/tutorial.html#HelloWorld) always have you include this meta tag:

&lt;!-- language: lang-html --&gt;

    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot; /&gt;

Most of the 3rd-party examples I&#39;ve seen also do it. I wrote a plugin using it, though, and one of my users [told me it&#39;s preventing him from being able to zoom in and out on his mobile device](http://wordpress.org/support/topic/plugin-basic-google-maps-placemarks-meta-viewport-set-to-non-scaling?replies=2). I don&#39;t have a mobile device to test with, and none of my searches revealed any helpful information.

So, what&#39;s the point of the tag? Should I leave it in? Should I try to detect the browser agent and only show it for desktop browsers?

If you want to examine the plugin, you can [download it](http://wordpress.org/extend/plugins/basic-google-maps-placemarks/), [browse the source](http://plugins.svn.wordpress.org/basic-google-maps-placemarks/tags/1.1.2/) or [see a live example](http://washingtonhousechurches.net/).

What&#39;s the point of &#39;meta viewport user-scalable=no&#39; in the Google Maps API

I&#39;ve tried all three of these to no avail:

    &lt;meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /&gt;
    
    &lt;meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /&gt;
    
    &lt;meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /&gt;

each are different values I found recommended by google searching or SO searching, but none of the &#39;**user-scalable=X**&#39; values seem to be working

I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the `user-scalable` value present, still no luck.


----------


**UPDATE**

Got this from Apple&#39;s site and it works:

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot; /&gt;

it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops

How do you disable viewport zooming on Mobile Safari?

I was going through the source code of a website and found this piece of code.

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0&quot;&gt;

I want to know what this initial scale, user-scalable, minimum-scale, maximum-scale are and what does those values mean? And also tell me what all values they accepts.

What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

What is viewport in HTML? Could you give some examples on how to access the viewport details?

What is viewport in HTML.

So I&#39;ve been using:

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0; maximum-scale=1.0;&quot;/&gt;

to get my HTML content to display nicely on the iPhone.  It works great until the user
rotates the device into landscape mode, where the display remains constrained to 320px.

Is there a simple way to specify a viewport that changes in response to the user changing the
device orientation?  Or must I resort to Javascript to handle that?


How to set viewport meta for iPhone that handles rotation properly?

I&#39;m trying to find the exact height and width of a browser&#39;s viewport, but I suspect that either Mozilla or IE is giving me the wrong number. Here&#39;s my method for height:

    var viewportHeight = window.innerHeight || 
                         document.documentElement.clientHeight || 
                         document.body.clientHeight;

I haven&#39;t started on width yet but I&#39;m guessing it&#39;s going to be something similar.

Is there a more correct way of getting this information? Ideally, I&#39;d like the solution to work with Safari/Chrome/other browsers as well.

Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)

`:vsplit` (short form: `:vs`) split the Vim viewport vertically. `:30vs` splits the viewport, making the new window 30 characters wide. Once this 30 char window is created, how would one change it&#39;s size to 31 or 29?

With horizontal windows &lt;kbd&gt;Ctrl&lt;/kbd&gt;-&lt;kbd&gt;W&lt;/kbd&gt; &lt;kbd&gt;+&lt;/kbd&gt; increases the number of lines by one. What is the equivalent command to increase the columns by one?

How to increase the vertical split window size in Vim

I have a added to the `&quot;viewport&quot;` meta tag `&quot;width=device-width,initial-scale=1.0&quot;` and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales the page up and I have to pinch zoom it back to a 1 scale.

I can fix this by adding the `&quot;maximum-scale=1.0, user-scalable=no&quot;`, but I was wondering if there is a way I could fix this without taking away from the user the ability to zoom in the page.

If you have any suggestions I would love to hear them,  
Thanks!

iPad layout scales up when rotating from portrait to landscape

I&#39;m using this code on my webpage

    &lt;meta name=&quot;viewport&quot; content=&quot;width=1000, initial-scale=1.0, maximum-scale=1.0&quot;&gt;

I would think the initial scale would make sure the webpage was zoomed out, but it doesn&#39;t. Any ideas?

I&#39;ve tried this:

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;/&gt;

But, I need the width to be set to 1000px or it doesn&#39;t look correct.

Answer:
-------

    &lt;meta name=&quot;viewport&quot; content=&quot;width=1000; user-scalable=0;&quot; /&gt;

Webpage starts zoomed in on mobile devices

I&#39;m sure this was solven 1000 times before: I got a canvas in the size of 960*560 and a room in the size of 5000*3000 of which always only 960*560 should be drawn, depending on where the player is. The player should be always in the middle, but when near to borders - then the best view should be calculated). The player can move entirely free with WASD or the arrow keys. And all objects should move themselves - instead of that i move everything else but the player to create the illusion that the player moves.

I now found those two quesitons:

https://stackoverflow.com/questions/11464550/html5-creating-a-viewport-for-canvas works, but only for this type of game, i can&#39;t reproduce the code for mine.

https://stackoverflow.com/questions/8592872/changing-the-view-center-of-an-html5-canvas seems to be more promising and also perfomant, but i only understand it for drawing all other objects correctly relative to the player and not how to scroll the canvas viewport relative to the player, which i want to achieve first of course.

My code (simplified - the game logic is seperately):

    var canvas = document.getElementById(&quot;game&quot;);
    canvas.tabIndex = 0;
    canvas.focus();
    var cc = canvas.getContext(&quot;2d&quot;);
    
    // Define viewports for scrolling inside the canvas
    
    /* Viewport x position */   view_xview = 0;
    /* Viewport y position */   view_yview = 0;
    /* Viewport width */        view_wview = 960;
    /* Viewport height */       view_hview = 560;
    /* Sector width */          room_width = 5000;
    /* Sector height */         room_height = 3000;
    
    canvas.width = view_wview;
    canvas.height = view_hview;
    
    function draw()
    {
        clear();
        requestAnimFrame(draw);
    
        // World&#39;s end and viewport
        if (player.x &lt; 20) player.x = 20;
        if (player.y &lt; 20) player.y = 20;
        if (player.x &gt; room_width-20) player.x = room_width-20;
        if (player.y &gt; room_height-20) player.y = room_height-20;
    
        if (player.x &gt; view_wview/2) ... ?
        if (player.y &gt; view_hview/2) ... ?
    }

The way i am trying to get it working feels totally wrong and i don&#39;t even know how i am trying it... Any ideas? What do you think about the context.transform-thing?

I hope you understand my description and that someone has an idea. Kind regards

All Viewport Solutions on Gang of Coders

Total of 24 Viewport Solutions