Home > Developer > JavaScript
Javascript can obtain resolution and various height widths. The results vary in Firefox, ie, and chrome browsers.
Conclusion: The Screen Resolution is reliable, with window. Screen. height + 'X' + window. Screen. width.
Only chrome knows how many scroll bars are rolled.
The webpage height is reliable, with document. Body. scrollheight.
The webpage width cannot be document. Body. scrollwidth.
How wide is the browser? IE6 does not know. Other Browsers Do.
I don't know how high the browser is.
Another point is that the overall amplification of IE and Firefox is to simulate a small resolution. The overall amplification of 125% x900 is 1280, And the JS detection is 720 X. That is to say, the resolution of IE and Firefox in traffic statistics is no longer reliable. Chrome's resolution remains reliable after overall amplification.
Online effect: http://web-developer-tips.appspot.com/javascript_screen_width/
Code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<Head>
<Title> JavaScript display resolution </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/CSS">
Body
{
Margin: 0;
Padding: 0;
}
</Style>
</Head>
<Body>
<Div style = "width: 3000px; Height: 2000px;">
<H1> JavaScript display resolution <Div style = "position: fixed; left: 20px; top: 50px; Background: # ffcc00;" id = "content">
</Div>
</Div>
<SCRIPT type = "text/JavaScript">
// <! [CDATA [
// Var font_size = screen. width/64 + 'px ';
// Document. Body. style. fontsize = font_size;
// Var P = Document. createelement ("p ");
// P. innerhtml = "resolution" + screen. Width + 'X' + screen. height;
// Alert ("resolution" + screen. Width + 'X' + screen. Height );
Function showwidth ()
{
VaR S = "";
S + = "<p> visible area width of the webpage:" + document.doc umentelement. clientwidth;
S + = "</P> <p> visible area of the webpage:" + document.doc umentelement. clientheight;
S + = "</P> <p> visible area width of the webpage:" + document. Body. offsetwidth + "(including the width of the edge and scroll bar )";
S + = "</P> <p> visible area height of the webpage:" + document. Body. offsetheight + "(including the width of the edge )";
S + = "</P> <p> webpage text width:" + document. Body. scrollwidth;
S + = "</P> <p> webpage text Height:" + document. Body. scrollheight;
S + = "</P> <p> webpage volume Height:" + document. Body. scrolltop;
S + = "</P> <p> left side of the page to which the webpage is rolled:" + document. Body. scrollleft;
S + = "</P> <p> webpage body part:" + window. screentop;
S + = "</P> <p> left part of the webpage body:" + window. screenleft;
S + = "</P> <p> screen resolution Height:" + window. Screen. height;
S + = "</P> <p> screen resolution width:" + window. Screen. width;
S + = "</P> <p> available screen workspace Height:" + window. Screen. availheight;
S + = "</P> <p> available workspace width:" + window. Screen. availwidth;
S + = "</P> <p> your screen is set to" + window. Screen. colordepth + "bit color ";
S + = "</P> <p> your Screen Settings" + window. Screen. devicexdpi + "pixels/inches </P> ";
Document. getelementbyid ('content'). innerhtml = s;
}
Window. onload = function ()
{
Showwidth ();
}
Window. onresize = function ()
{
Showwidth ();
}
Window. onscroll = function ()
{
Showwidth ();
}
//]>
</SCRIPT>
</Body>
</Html>
:
ASDF
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
