They are viewport meta tags, and is most applicable on mobile browsers. width=device-width This means, we are telling to the browser “my website adapts to your device width”. initial-scale This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This … Read more
EDIT: Because this keeps getting commented on, we all know that we shouldn’t do this. The question was how do I do it, not should I do it. Add this into your for mobile devices. Then do your widths in percentages and you’ll be fine: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> Add this in … Read more
I realize this is a little old, but, yes it can be done. Some javascript to get you started: viewport = document.querySelector(“meta[name=viewport]”); viewport.setAttribute(‘content’, ‘width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0′); Just change the parts you need and Mobile Safari will respect the new settings. Update: If you don’t already have the meta viewport tag in the source, you … Read more
On many devices (such as the iPhone), it prevents the user from using the browser’s zoom. If you have a map and the browser does the zooming, then the user will see a big ol’ pixelated image with huge pixelated labels. The idea is that the user should use the zooming provided by Google Maps. … Read more
I think what you’re seeing is the hiding and showing of scrollbars. Here’s a quick demo showing the width change. As an aside: do you need to poll constantly? You might be able to optimize your code to run on the resize event, like this: $(window).resize(function() { //update stuff });
The easiest way to determine the size and position of an element is to call its getBoundingClientRect() method. This method returns element positions in viewport coordinates. It expects no arguments and returns an object with properties left, right, top, and bottom. The left and top properties give the X and Y coordinates of the upper-left … Read more
Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue. It appears that browsers that parse the <meta name=”viewport”> tag simply ignore overflow attributes on the html and body tags. Note: You may also need to add position: relative to the … Read more
It is Safari specific, at least at time of writing, being introduced in Safari 9.0. From the “What’s new in Safari?” documentation for Safari 9.0: Viewport Changes Viewport meta tags using “width=device-width” cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding “shrink-to-fit=no” to … Read more
In order to make the canvas full-screen width and height always, meaning even when the browser is resized, you need to run your draw loop within a function that resizes the canvas to the window.innerHeight and window.innerWidth. Example: http://jsfiddle.net/jaredwilli/qFuDr/ HTML <canvas id=”canvas”></canvas> JavaScript (function() { const canvas = document.getElementById(‘canvas’); const context = canvas.getContext(‘2d’); // resize … Read more
It’s possible to prevent webpage scaling in safari on iOS 10, but it’s going to involve more work on your part. I guess the argument is that a degree of difficulty should stop cargo-cult devs from dropping “user-scalable=no” into every viewport tag and making things needlessly difficult for vision-impaired users. Still, I would like to … Read more