【响应式web设计(二)】视口(viewport)
2017-05-08 23:20
435 查看
(一)布局viewport
在开发pc页面时,一般内容页的长度和宽度都比较大,如果直接在移动端打开,因为移动端的宽度窄,之前在PC端的页面就会因为宽度的问题出现布局混乱,所以apple公司就提出了布局viewport的概念。
各个设备的布局viewport都不相同,ios系统的默认布局viewport是980px,这样在布局viewport中之前在pc页面的布局就不会乱。布局viewport如下所示:
常用的移动端系统对应的viewport值。
(二)视口viewport
上面的布局viewport主要是保证页面的布局不乱的,还有一个叫视口viewport(visual viewport)的概念,视口viewport是用户正在看到的网站的区域。如下图所示:
视口viewport一般和网页的缩放有关,如果页面缩放比是200%,那么视口viewport就变小了,反之亦然。
可以这么理解:
页面缩放比是200%时,用户能看到的视口中的像素就变少了,所以视口viewport变小。
( 三 ) meta标签
前面讲了布局viewport和视口viewport,在实际中我们能控制的只有布局viewport,所以在进行移动端开发之前我们经常会写下面一段代码:
<meta name="viewport" content="width=device-width;init-scale=1,user-scale=no"/>
这个meta标签就是用来控制布局viewport的:
width=device-width(布局viewport的宽度为设备的宽度)
init-scale=1(默认的缩放比是100%)
user-scale=no(用户禁止缩放)
其中,在JavaScript中通过下面方法可以获得对应的viewport:
布局viewport: document.body.clientWidth
视口viewport:window.innerWidth
以上,就是响应式开发过程中第二个要明白的问题:视口。
在开发pc页面时,一般内容页的长度和宽度都比较大,如果直接在移动端打开,因为移动端的宽度窄,之前在PC端的页面就会因为宽度的问题出现布局混乱,所以apple公司就提出了布局viewport的概念。
各个设备的布局viewport都不相同,ios系统的默认布局viewport是980px,这样在布局viewport中之前在pc页面的布局就不会乱。布局viewport如下所示:
常用的移动端系统对应的viewport值。
(二)视口viewport
上面的布局viewport主要是保证页面的布局不乱的,还有一个叫视口viewport(visual viewport)的概念,视口viewport是用户正在看到的网站的区域。如下图所示:
视口viewport一般和网页的缩放有关,如果页面缩放比是200%,那么视口viewport就变小了,反之亦然。
可以这么理解:
页面缩放比是200%时,用户能看到的视口中的像素就变少了,所以视口viewport变小。
( 三 ) meta标签
前面讲了布局viewport和视口viewport,在实际中我们能控制的只有布局viewport,所以在进行移动端开发之前我们经常会写下面一段代码:
<meta name="viewport" content="width=device-width;init-scale=1,user-scale=no"/>
这个meta标签就是用来控制布局viewport的:
width=device-width(布局viewport的宽度为设备的宽度)
init-scale=1(默认的缩放比是100%)
user-scale=no(用户禁止缩放)
其中,在JavaScript中通过下面方法可以获得对应的viewport:
布局viewport: document.body.clientWidth
视口viewport:window.innerWidth
以上,就是响应式开发过程中第二个要明白的问题:视口。
相关文章推荐
- 视口与摄像机 (viewport & camera) 翻译
- CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口
- 视口viewport
- Equalizer中的视口(viewport)与像素视口(pixel viewport)
- 【转】【翻译】Orx官方教程:05.视口与摄像机 (viewport & camera)
- Android OpenGL ES和OpenGL一起学(二)------理解Viewport(视口)和坐标系OpenGL篇
- 视口(viewport)原理详解之第一部分
- 移动web——viewport(视口)
- Android OpenGL ES和OpenGL一起学(二)------理解Viewport(视口)和坐标系Android OpenGL ES篇
- qt viewport window 视口 窗口
- 移动端开发总结(一)视口viewport总结
- 响应式Web设计:Media Queries和Viewport的困惑
- LibGDX_4.6: 多分辨率屏幕适配: 视口(Viewport)
- 移动端Viewport 视窗(视口)
- 论Qt4的视口(ViewPort)与窗口(Window)
- Android OpenGL ES和OpenGL一起学(二)------理解Viewport(视口)和坐标系OpenGL篇
- 窗口window 和 视口 viewport 恐龙平铺 源代码
- 视口(viewport)原理详解之第二部分(移动端浏览器)
- 视口viewport和度量iewport
- 移动web开发之视口viewport