文档章节

理解移动端viewport

小尾巴儿
 小尾巴儿
发布于 2016/12/05 20:26
字数 975
阅读 10
收藏 1

参考文档:Safari Web Content Guide

首先要弄清楚 三个视口 的概念,分别是:视觉视口、布局视口、理想视口 ##1.视觉视口 就是指用户的可见视野。 ##2.布局视口 或许你不知道'布局视口'这个概念,但是在移动端页面中,你肯定用过下面这行代码。这行代码的作用就是设置布局视口。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

布局视口主要是针对移动端而言,对于pc端而言,布局视口和视觉视口是一个概念。为什么移动端会分开这两个概念呢?

移动端的浏览器在显示一个没有针对移动端特殊设计的pc端网页时,如果布局视口还是采用视觉视口,那么空间严重不够。

下图是将一个宽度为980px的网页显示在布局视口分别为320px和980px的浏览器中。在布局视口为980px时,网页刚好显示完整,而在布局视口为320px时(比如在iPhone5下,布局视口采用视觉视口的大小),只有灰色的方块部分能够显示出来,其他部分均需要用户移动网页才能看见。真是糟糕的体验。

输入图片说明

会将网页缩小,方便移动端用户查看。这就是通过改变布局视口实现的,大多数浏览器会把这个视口设置为980px。你可以通过chrome的模拟器查看。

输入图片说明

布局视口的大小就是给你的‘画布’大小,你的整幅画会完整的显示在视觉视口中(当然你不能把画绘制在画布外)。因此,同样大小px定义的元素,在移动端看到的会比pc端小。如下图,红色的方块

.test1{
            width: 200px;
            height: 200px;
            background: red;
        }

pc端:

输入图片说明

移动端:

输入图片说明

##3.理想视口 就是大家觉得在该设备该浏览器下最理想的布局视口大小。浏览器产商有可能为不同浏览器,或者同一浏览器在不同设备下设置不一样的理想视口。

##4.怎样设置布局视口 因为viewport这一概念最先由apple提出并使用,后来被其他浏览器采用。因此我翻译了apple对viewport设置的部分官方引导。

###4.1默认设置 默认宽度为980px,绝大多数网站都可以很好的显示。如果你的网站显示定义了宽度小于980px,就会如下图右边;如果你的网页的宽度大于980px,就会出现滚动条。解决方法很简单,设置viewport为你的网页宽度。so easy!!

输入图片说明

###4.2修改布局视口 其实垂直滚动条在移动端已经很常见,用户也已经很适应。因此我觉得只要设置布局视口的宽度就好。如果是专门的移动端网站、应用,建议将布局视口的宽度设置为设备的宽度,即:

<meta name="viewport" content="width=device-width">

对于一些短期营销H5,我们没有必要通过rem来做适配。只需要将布局视口写死,浏览器会自动在不同的设备上进行缩放。

<meta name="viewport" content="width=640">

关于viewport的属性有很多,你不必一一设置,下面将说明Safari怎样推断我们没有设置的属性值。

##5.Safari怎样推断没有设置的属性值 ###5.1仅仅设置了initial scale为1 Safari on iOS会自动将viewport的宽度设置为设备宽度;如果用户横屏,它会将viewport的宽度设置为设备的高度。

输入图片说明

###5.2仅仅设置了width为device-width 此时无论横竖屏,viewport的宽度都为device-width

输入图片说明

###5.3设置了width和initial-width

输入图片说明

##6.通用做法

<meta name = "viewport" content = "user-scalable=no, width=device-width,initial-scale=1">

© 著作权归作者所有

共有 人打赏支持
小尾巴儿
粉丝 5
博文 10
码字总数 11539
作品 0
深圳
程序员
移动端开发之viewport

参考了很多资料,说说自己对viewport的理解 viewport分visual viewport和layout viewport,visual viewport可以理解为移动设备屏幕的可视区域,visual viewport的大小可以理解为就是品目可视...

LorinLuo
2016/10/14
37
0
从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,视口,屏幕适配

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
08/07
0
0
墙裂科普:移动端适配的基础概念

近几年移动端设备数量增长迅速,导致各种设备屏幕尺寸不一,分辨率也是不尽相同。 作为一个前端开发者,就不得不面对移动端页面适配的问题,而适配的终极目标,就是让页面能在不同尺寸,不同...

沃趣葫芦娃
07/02
0
0
Html开发之Viewport的使用

近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试...

LCore
2014/10/19
0
9
移动端开发基础 干货分享

移动端开发 我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站 app:application应用程序。手机软件:主要指安装在智能手机上的软件,完善原始系...

WEB攻程狮
2017/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

此生1.3

颜值是开胃菜,不要太在意,正餐才是重点。

colinux
今天
1
0
[雪峰磁针石博客]软件测试专家工具包1web测试

web测试 本章主要涉及功能测试、自动化测试(参考: 软件自动化测试初学者忠告) 、接口测试(参考:10分钟学会API测试)、跨浏览器测试、可访问性测试和可用性测试的测试工具列表。 安全测试工具...

python测试开发人工智能安全
今天
3
0
JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
3
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
1
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部