0 reply content: document.doc umentElement. clientWidth;
Document.doc umentElement. clientHeight;
This results in the visible width and height of the device pixel. For example, when the viewport is set to 1 in iPhone 4s, the value is 320*416 (mobile phone 480-status bar 64), and the value in iPhone 5 is 320*504.
I am engaged in html5 web development on the mobile end. I 've been tossing a lot to get a mobile phone, and Du Niang's Google is basically incorrect. Generally, it's okay, but there will be problems when the project goes online, the width and height obtained by a small number of mobile phones are incorrect. For example, the screen. width screen. height data mentioned above is not accurate on some mobile phones, such as some Samsung models (specific models, tested at the time, but I forgot to do so now ). Generally, the actual screen resolution is not available in Mobile browsers, because page rendering is in a page rendering area called viewport. Viewport does not correspond to the actual screen size. For example, in Safari Mobile, the default viewport width (320px) is half of the actual screen size (640px. innerHeight or window. screen. all width values are 320px. Of course, we can change the viewport ratio through meta settings, such as initial-scale =. 5. The viewport size is the same as that of the screen. This proportion is not necessarily twice the size of the screen on different mobile phones, especially Android phones. In addition, changing the viewport ratio may cause a series of problems in subsequent production.
In addition, in the Android system, you can set target-densitydpi = device-dpi in viewport to make the viewport size consistent with the actual screen size, but iOS does not work, so this method is not universal.
So I don't think it's okay to get the real size of the screen and use the viewport size as the screen size for page design and creation.
Example of setting a viewport:
Document
Window. innerHeight attribute, window. innerWidth attribute
These two attributes return the height and width of the browser window occupied by the CSS layout of the webpage, in pixels. Obviously, when a user scales up a webpage (for example, the size of a webpage is increased from 100% to 200%), these two attributes become smaller.
Note that these two attribute values include the height and width of the scroll bar.
Screen Object
The screen object contains information about the display device.
- Screen. height: displays the height of the device, in pixels.
- Screen. width: display the device width, in pixels.
The above two attributes are regarded as constants and will not change unless the resolution of the display device is adjusted.
The following is the code that directs users to different webpages Based on the screen resolution.
if ((screen.width<=800) && (screen.height<=600)) { window.location.replace('small.html');} else { window.location.replace('wide.html');}
