browser viewport width
问题的文章之后,我总结了一个试验,看看我是否理解了这个概念。
我在下面使用了javascript:此脚本打印“您的视口宽度为WidthxHeight”
元素1:分辨率为1920 x 1080,HP x2301屏幕没有任何滚动条: JS打印:您的视口宽度为1920x955
元素2:分辨率为1920 x 1080,带滚动条的HP x2301屏幕(我增加了页面的高度,有很多lorem Ipsum字符串段落): JS打印:您的视口宽度为1920x955
元素3:在Chrome中,我检查了element1视图和element2视图。对于元素2,使用滚动条,Chrome将宽度写为1903像素,而不是1920.
我的问题是:
new width = (1920 - scroll bar width)
。例如,Chrome在其检测工具中写入了1903像素。<meta name="viewport" content="initial-scale=1, width=device-width">
声明为元标记。在我的CSS3中,我宣布@media screen and (max-width: 1000px) { change something for responsiveness }
由于我的目标是在浏览器的视口中响应,这两个组合是否正常?此时我应该说我的视口定义和目标是没有垂直滚动条的纯显示宽度。由于我的理解,max-width:1000px
对我来说意味着:在纯显示宽度为&lt; = 1000px javascript源链接是:http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
<script type="text/javascript">
<!--
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 (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
提前谢谢,问候
答案 0 :(得分:0)
我明白了。
我更改了JS并获得了真正的视口宽度。
JS老板是来自SO家族的Vilmantas Baranauskas。
相关的SO链接:Get the height and width of the browser viewport without scrollbars using jquery?
相关脚本:
<script type="text/javascript">
var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
viewportHeight = document.body.clientHeight;
viewportWidth = document.body.clientWidth;
} else {
viewportHeight = document.documentElement.clientHeight;
viewportWidth = document.documentElement.clientWidth;
}
document.write('<p>Your viewport width without scrollbars is '+viewportHeight+'x'+viewportWidth+'</p>');
</script>
1903像素宽度是真的,因为滚动条标准宽度是17px,据我所知。
我还建议任何人使用CSS overflow-y:scroll;
或Body
代码中的HTML
代码,以便浏览器始终显示滚动条,即使是空白草稿网页也是如此。< / p>