文档章节

理解移动端viewport

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

参考文档: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 ⋅ 0

Html开发之Viewport的使用

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

LCore ⋅ 2014/10/19 ⋅ 9

移动端开发基础 干货分享

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

WEB攻程狮 ⋅ 2017/12/06 ⋅ 0

关于手机网页自适应屏幕技巧

文章主要参考于:http://www.ruanyifeng.com/blog/2012/05/responsivewebdesign.html(阮一峰的网络日志) 在这篇文章的基础上加上了写自己的理解(文章蓝色部分)。 一. 允许网页宽度自动调整...

范思哲思考者 ⋅ 2014/05/17 ⋅ 0

关于移动端的适配

写在前面 本文参考了大量关于移动端适配的资料 侵删 谢谢 基础介绍 在说明移动端的适配之前我们需要理解一个重要的东西 像素!! 像素 在移动端给一个元素设置时发生了什么?这里的px到底是多...

熊蛋子17 ⋅ 2017/12/31 ⋅ 0

一篇文章搞懂CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

最近看了很多这方面的文章,能搜到的基本看了个遍,但感觉还是似懂非懂,知道这个东西,很难说出这是个什么东西,先整理一些概念,慢慢消化,以后慢慢探索其中的原因。 1、PX(CSS pixels) 1....

半撇私塾 ⋅ 2017/11/11 ⋅ 0

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各...

Rella ⋅ 2015/04/10 ⋅ 0

HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223 ⋅ 2017/08/25 ⋅ 0

移动前端开发之viewport的深入理解

转载自: http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关...

ahl123 ⋅ 2017/10/29 ⋅ 0

移动端解决方案--mobileHack

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案: 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备...

1354057778 ⋅ 2015/10/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 43分钟前 ⋅ 0

python3中报错的解决方法(长期更新)

1、ImportError: No module named ‘DjangoUeditor’ 出错原因:安装DjangoUeditor库适用于python2,需要下载适用python3的 下载地址:https://github.com/twz915/DjangoUeditor3 2、python3......

xiaoge2016 ⋅ 48分钟前 ⋅ 0

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 今天 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 今天 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 今天 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html...

whoisliang ⋅ 今天 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 今天 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 今天 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 今天 ⋅ 0

web添加log4j

添加xml配置log4j.properties # Global logging configuration---root日志设置#log4j.rootLogger=info,dailyRollingFile,stdoutlog4j.rootLogger=debug,stdout,dailyRollingFile---......

黄柳淞 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部