2种pixel:
Css pixel (随缩放变化）
device pixel (不变)
3个框
Desktop:
Screen>document(viewport)(不含scrollbar)>Window(含scroll bar)
screen.width/height
-
Meaning
- Total size of the user’s screen. Measured in
- Device pixels Browser errors
- IE8 measures it in CSS pixels, in both IE7 and IE8 mode.
window.innerWidth/Height
-
Meaning
- Total size of the browser window, including scrollbars. Measured in
- CSS pixels Browser errors
- Not supported by IE.
- Opera measures it in device pixels.
window.pageX/YOffset
-
Meaning
- Scrolling offset of the page. Measured in
- CSS pixels Browser errors
- None
document. documentElement. clientWidth/Height
-
Meaning
- Viewport dimensions Measured in
- CSS pixels Browser errors
- None
document. documentElement. offsetWidth/Height
-
Meaning
-
Dimensions of the
<html>element (and thus of the page).
Measured in
- CSS pixels Browser errors
-
IE measures the viewport, and not the
<html>element.
pageX/Y, clientX/Y, screenX/Y
-
Meaning
- see main text Measured in
- see main text Browser errors
- IE doesn’t support pageX/Y.
- IE and Opera calculate screenX/Y in CSS pixels.
Media queries
-
Meaning
- see main text Measured in
- see main text Browser errors
- IE doesn’t support them.
-
For
device-width/heightFirefox uses the valuesscreen.width/heightwould have if they are measured in CSS pixels. -
For
width/heightSafari and Chrome use the valuesdocumentElement .clientWidth/Heightwould have if they are measured in device pixels.
Mobile:
document(layout viewport)>window(visual viewport)=screen
document. documentElement. clientWidth/Height
-
Meaning
- Layout viewport dimensions Measured in
- CSS pixels Full support
- Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyfire, Obigo Problems
- Visual viewport dimensions in Iris
-
Samsung WebKit reports the correct values when a
<meta viewport>tag is applied to the page; the dimensions of the<html>element otherwise. - Screen dimensions in device pixels in Firefox
-
IE returns 1024x768. However, it stores the information in
document.body.clientWidth/Height. This is consistent with IE6 desktop. - NetFront’s values are only correct at 100% zoom.
- Symbian WebKit 1 (older S60v3 devices) does not support these properties. Not supported
- BlackBerry
window.innerWidth/Height
-
Meaning
- Visual viewport dimensions Measured in
- CSS pixels Full support
- iPhone, Symbian, BlackBerry Problems
- Opera and Firefox return the screen width in device pixels.
- Android, Bolt, MicroB, and NetFront return the layout viewport dimensions in CSS pixels. Not supported
-
IE, but it gives the visual viewport dimension in
document. documentElement. offsetWidth/Height. -
Samsung WebKit reports either the dimensions of the layout viewport or of the
<html>, depending on whether a<meta viewport>tag has been applied to the page or not.
Gibberish
- Iris, Skyfire, Obigo
screen.width and screen.height
-
Meaning
- Screen size Measured in
- Device pixels Full support
- Opera Mini, Android, Symbian, Iris, Firefox, MicroB, IE, BlackBerry Problems
- Opera Mobile on Windows Mobile only gives the landscape size. Opera Mobile on S60 gets it right.
-
Samsung WebKit reports either the dimensions of the layout viewport or of the
<html>, depending on whether a<meta viewport>tag has been applied to the page or not. - iPhone and Obigo only give portrait sizes.
- NetFront only gives landscape sizes. Gibberish
- Bolt, Skyfire
window.pageX/YOffset
-
Meaning
- Scrolling offset; which is the same as the visual viewport’s offset relative to the layout viewport. Measured in
- CSS pixels Full support
- iPhone, Android, Symbian, Iris, MicroB, Skyfire, Obigo. Problems
- Opera, Bolt, Firefox, and NetFront always return 0.
-
Samsung WebKit reports correct values only if a
<meta viewport>is applied to the page.
Not supported
-
IE, BlackBerry. IE stores the values in
document. documentElement. scrollLeft / Top
document. documentElement. offsetWidth / Height
-
Meaning
-
Total size of the
<html>element.
Measured in
- CSS pixels Full support
- Opera, iPhone, Android, Symbian, Samsung, Iris, Bolt, Firefox, MicroB, Skyfire, BlackBerry, Obigo. Problems
- NetFront’s values are only correct at 100% zoom.
-
IE uses this propery pair to store the dimensions of the visual viewport. In IE, see
document. body. clientWidth/Heightfor the correct values.
Media queries
-
Meaning
-
Measure
<html>element width (CSS pixels) or device width (device pixels).
Full support
- Opera, iPhone, Android, Symbian, Samsung, Iris, Bolt, Firefox, MicroB. Not supported
- Skyfire, IE, BlackBerry, NetFront, Obigo. Note
- What I test here is whether the browsers take their data from the correct property pairs. Whether these property pairs give correct information is not part of this particular test.
Event coordinates
-
Meaning
- See main text. Measured in
- See main text. Full support
- Symbian, Iris Problems
- Opera Mobile gives pageX/Y in all three property pairs, but something goes wrong when you scroll a lot.
- On iPhone, Firefox, and BlackBerry clientX/Y is equal to pageX/Y
- On Android and MicroB screenX/Y is equal to clientX/Y (in CSS pixels, in other words)
- On Firefox screenX/Y is wrong.
- IE, BlackBerry, and Obigo don’t support pageX/Y.
- In NetFront all three are screenX/Y.
- In Obigo clientX/Y is screenX/Y.
- Samsung WebKit always reports pageX/Y. Not tested in
- Opera Mini, Bolt, Skyfire
Meta viewport
-
Meaning
- Set the layout viewport’s width. Measured in
- CSS pixels Full support
- Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo Not supported
- Opera Mini, Symbian, Bolt, Firefox, MicroB, NetFront Problems
- Skyfire can’t handle my test page.
-
If the
<meta viewport>is applied to the page in Samsung WebKit, several other properties change meaning. - Opera Mobile, iPhone, Samsung, and BlackBerry do not allow the user to zoom out.
扫一扫
5460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
