理解响应式设计的视口宽度 [英] understanding viewport width for responsive design
问题描述
在阅读了很多关于浏览器视口宽度
问题后,我决定尝试一下,看看我是否理解了这个概念.
after reading a lot about browser viewport width
issues, I concluded to make a trial to see that if I understood the concept.
我在下面使用了 javascript:此脚本打印您的视口宽度为 WidthxHeight"
I used javascript below: This script prints "Your viewport width is WidthxHeight"
元素 1:在 1920 x 1080 分辨率下,HP x2301 屏幕没有任何滚动条:JS 打印:您的视口宽度为 1920x955
Element 1: At a 1920 x 1080 resolution, HP x2301 screen without any scroll bar: JS printed: Your viewport width is 1920x955
元素 2:在 1920 x 1080 分辨率下,带有滚动条的 HP x2301 屏幕(我增加了页面的高度,有很多 lorem Ipsum 字符串段落):JS 打印:您的视口宽度为 1920x955
Element 2: At a 1920 x 1080 resolution, HP x2301 screen with scroll bar (I increased the height of page with lots of lorem Ipsum string paragraphs): JS printed: Your viewport width is 1920x955
Element3:在 Chrome 中,我检查了 element1 视图和 element2 视图.对于带有滚动条的元素 2,Chrome 将宽度写为 1903 像素,而不是 1920.
Element3: At Chrome, I inspected element1 view and element2 view. For element 2, with scroll bar, Chrome wrote width as 1903 pixel, not 1920.
我的问题是:
- 为什么 element1 和 element2 的宽度相同?对于 element2,我期待
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 responseness }
因为我的目标是在浏览器的视口中响应,所以这2个组合好吗?在这一点上,我应该说我的视口定义和目标是没有垂直滚动条的纯显示宽度.根据我的理解,max-width:1000px
对我来说意味着:在纯显示宽度为 <=1000px 后立即响应布局
- Why element1 and element2 gave the same width? For element2, I was expecting
new width = (1920 - scroll bar width)
. For example Chrome wrote 1903 pixel in its inspection tool. - I declared
<meta name="viewport" content="initial-scale=1, width=device-width">
in my header as a meta tag. And in my CSS3, I declared@media screen and (max-width: 1000px) { change something for responsiveness }
Since my aim is to be responsive in browser's viewport, does these 2 combination OK? At this point I should say that my viewport definition and aim is pure display width without vertical scroll bar. Because of my understanding,max-width:1000px
means to me: be responsive in layout just after pure display width is <=1000px
javascript 源链接是:http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
javascript source link is: 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>
先谢谢你,问候
推荐答案
我明白了.
我更改了 JS 并获得了真实的视口宽度.
I changed the JS and got the true viewport width.
JS 所有者是来自 SO 家族的 Vilmantas Baranauskas.
JS owner is Vilmantas Baranauskas from SO family.
相关SO链接:使用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 像素宽度是正确的,因为我知道滚动条的标准宽度是 17 像素.
1903 pixel width is true since scroll-bar std width is 17px as I know.
我也建议任何人在 CSS Body
或 HTML
标签中使用 overflow-y:scroll;
代码来制作浏览器即使是空白的草稿网页,也始终显示滚动条.
I also recommend to any one to use overflow-y:scroll;
code in CSS Body
or HTML
tag in order to make browser display the scrollbar always even if for a blank draft web page.
这篇关于理解响应式设计的视口宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!