viewport

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

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

Full webpage and disabled zoom viewport meta tag for all mobile browsers

Unfortunately each browser has it’s own implementation of the viewport meta tag. Different combinations will work on different browsers. Android 2.2: viewport meta tag does not seem to be supported at all. Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width … Read more

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

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

HTML5 Canvas 100% Width Height of Viewport?

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

Get viewport/window height in ReactJS

Using Hooks (React 16.8.0+) Create a useWindowDimensions hook. import { useState, useEffect } from ‘react’; function getWindowDimensions() { const { innerWidth: width, innerHeight: height } = window; return { width, height }; } export default function useWindowDimensions() { const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); useEffect(() => { function handleResize() { setWindowDimensions(getWindowDimensions()); } window.addEventListener(‘resize’, handleResize); return () … Read more

Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers

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

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

if(window.innerHeight > window.innerWidth){ alert(“Please use Landscape!”); } jQuery Mobile has an event that handles the change of this property… if you want to warn if someone rotates later – orientationchange Also, after some googling, check out window.orientation (which is I believe measured in degrees…) EDIT: On mobile devices, if you open a keyboard then the … Read more

+ More