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
To get the width and height of the viewport: var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); resize event of the page: $(window).resize(function() { });
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
CTRL–W > and CTRL–W < to make the window wider or narrower.
Edit: may not work after iOS 10, please see touch-action based solution below. Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem. This works for me on Mobile Safari in iOS 4.2. <meta name=”viewport” content=”width=device-width, … Read more
Cross-browser @media (width) and @media (height) values const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) window.innerWidth and window.innerHeight gets CSS viewport @media (width) and @media (height) which include scrollbars initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls … Read more