Use the resize event The resize event will include the appropriate width and height after an orientationchange, but you do not want to listen for all resize events. Therefore, we add a one-off resize event listener after an orientation change: Javascript: window.addEventListener(‘orientationchange’, function() { // After orientationchange, add a one-time resize event var afterOrientationChange = … Read more
You also want to add the maximum scale <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> UPDATED I agree with some of the comments, the declaration should not limit the scaling by the user as this is bad practice. The below is a better approach and I believe that the zooming bug has long since been fixed by … Read more
On desktop operating systems, browser viewports are a fixed number of pixels wide, and web page content is rendered into them as-is. Starting with Safari on iOS (or whatever we were supposed to be calling iOS back then), mobile browser viewports have been “virtual”. Although the viewport may only take up (for example) 320 physical … Read more
I may be very late on this. Nevertheless for others, try: const browser = await puppeteer.launch({defaultViewport: null}); Set the defaultViewport option to null as above to disable the 800×600 resolution. It takes the max resolution then.
—— Update —— This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fix that works for iOS6. —— Original answer —— Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale Keep the Markup scalable <meta name=”viewport” content=”width=device-width, initial-scale=1″> Then disable … Read more
LIVE DEMO at jsfiddle.net This demo illustrates the viewport usage in a real game scenario. Use arrows keys to move the player over the room. The large room is generated on the fly using rectangles and the result is saved into an image. Notice that the player is always in the middle except when near … Read more
initial-scale=1.0 tells the browser to set the zoom level to normal (i.e. not zoomed in or out). You only need width=1000: <meta name=”viewport” content=”width=1000″>
You might try this: function getViewport() { var viewPortWidth; var viewPortHeight; // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != ‘undefined’) { viewPortWidth = window.innerWidth, viewPortHeight = window.innerHeight } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) else if … Read more
The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page. Follow this article’s instructions to get the viewport dimensions in Javascript. if (typeof window.innerWidth != ‘undefined’) { viewportwidth = window.innerWidth, viewportheight = window.innerHeight }
Was just trying to work this out myself, and the solution I came up with was: <meta name=”viewport” content=”initial-scale = 1.0,maximum-scale = 1.0″ /> This seems to lock the device into 1.0 scale regardless of it’s orientation. As a side effect, it does however completely disable user scaling (pinch zooming, etc).