金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 移动端适配方案,移动前端第一弹

移动端适配方案,移动前端第一弹

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-06 08:14

移动前端第一弹:viewport详解

2016/04/19 · CSS · 2 评论 · viewport

原文出处: 杜瑶(@doyoe)   

设置meta中的viewport:防止手机中网页放大和缩小**。

HTML5移动端开发中的Viewport标签及相关CSS用法解析,html5viewport

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。

layout viewport(布局视口)

一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

visual viewport(视觉视口)和物理像素

visual viewport(视觉视口)备物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素:

iPhone5 :640 * 1136
iPhone6:750 * 1334
iPhone6 Plus:1242 * 2208
ideal viewport(理想视口)和 dip (设备逻辑像素)

ideal viewport(理想视口)通常是我们说的屏幕分辨率。

dip (设备逻辑像素)跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina (视网膜)屏显示器硬件像素是:2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候,ideal viewport(理想视口)的宽度值是1920像素, 那么 dip 的宽度值就是1920。设备像素比是1.5(2880/1920)。设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是 ideal viewport(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:

iPhone5 :分辨率 320 * 568,物理像素 640 * 1136,@2x
iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x
iPhone6 Plus :分辨率 414 *  736,物理像素1242 * 2208,@3x,(注意,实际显示图像等比降低至1080×1920,具体原因我们文章最后会附带介绍)
图片 1

CSS像素

CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个 dip(设备逻辑像素) 。

使用viewport元标签控制布局

首先看一下viewport元标签极其属性:

CSS Code复制内容到剪贴板

  1. <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">  

这里是每个属性的详细介绍:

属性名 取值 描述
width 正整数 或 device-width 定义视口的宽度,单位为像素
height 正整数 或 device-height 定义视口的高度,单位为像素,一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes

width

width属性被用来控制layout viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,例如:

CSS Code复制内容到剪贴板

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

width=device-width 也就是将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dip 的宽度值是相等的。

height

与width类似,但实际上却不常用。

initial-scale

initial-scale用于指定页面的初始缩放比例:

CSS Code复制内容到剪贴板

  1. <meta name="viewport" content="initial-scale=1.5" />  

initial-scale=1 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度,initial-scale=1.5 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度的1.5倍。

maximum-scale

maximum-scale用于指定用户能够放大的最大比例,例如

CSS Code复制内容到剪贴板

  1. <meta name="viewport" content="initial-scale=1,maximum-scale=3" />  

假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。

minimum-scale

类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。

user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes,可被缩放,你也可以将该值设置为no,表示不允许用户缩放网页。例如:

CSS Code复制内容到剪贴板

  1. <meta name="viewport" content="user-scalable=no" />  

PS:关于iPhone 的屏幕分辨率 iPhone 6 Plus 官方标称屏幕是 1920 x 1080 的,但是在 Xcode 中我们发现模拟器的屏幕其实是看似奇怪的 2208 × 1242,为什么呢?
图片 2

这个缩小 17% 的比例是这么来的呢?来看 Stack Overflow 上的回答:iPhone 6 Plus resolution confusion: Xcode or Apple’s website? ,简单来说就是为了切图的放大倍数、实际渲染像素都是正整数。

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中...

移动端适配方案(上)

2017/01/25 · CSS · 移动端

本文作者: 伯乐在线 - risker 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

要搞懂移动端的适配问题,就要先搞明白像素和视口。

前言

这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。

你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。

但其实它一点也不新奇,不复杂。

还有就是,有些手机网站我们看到如下声明:

像素

在移动端给一个元素设置 width:200px 时发生了什么?这里的px到底是多长呢?像素是网页布局的基础,但是我们一直在用直觉使用它。

其实存在两种像素:

1. 设备像素

屏幕的物理像素,任何设备屏幕的物理像素的数量都是固定不变的,单位是pt

2. CSS像素

在CSS、JS中使用的一个抽象的概念,单位是 px

顺便说下,CSS像素也可以称为设备独立像素(device-independent pixels),简称为dips,单位是dp

那么,我们现在再来说说一个元素 width:200px 以后会怎么样。这个元素跨越了200个CSS元素,200个CSS元素相当于多少个设备像素取决于两个条件:

  • 页面是否缩放
  • 屏幕是否为高密度

这两方面后面再解释,先梳理一下手机硬件之间的关系,注意这里使用的都是物理像素

以 iPhone5 为例,我们已知的是:

  1. 分辨率1136pt x 640pt
    指屏幕上垂直有 1136 个物理像素,水平有 640 个物理像素
  2. 屏幕尺寸4英寸
    注意英寸是长度单位,不是面积单位。4英寸指的是屏幕对角线的长度。
  3. 屏幕像素密度326dpi
    屏幕像素密度(Pibel Per Inch)简称 ppi ,单位是 dpi(dot per inch)。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说,ppi越高越好,因为图像会更加细腻清晰。

ppi 是可以通过 分辨率屏幕尺寸 计算得到的:

图片 3

这个网站列出了很多设备的分辨率屏幕尺寸,并且计算了ppi

viewport简介

没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。

该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进。

举个简单的例子来讲为什么会需要它:

我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也就是近几年的事。(还记得不久前的几年,满大街都还是诺基亚的天下么?)

这时有一个很现实的问题摆在了厂商面前,用户并不能很好地通过手机等设备访问网页,因为屏幕太小。

 

代码如下:

视口

桌面浏览器中,浏览器窗口就是约束你的CSS布局视口(又称初始包含块)。它是所有CSS百分比宽度推算的根源,它的作用是给CSS布局限制了一个最大宽度,视口的宽度和浏览器窗口宽度一致。

但是在移动端,情况就很复杂了。

layout viewport

Apple也发现了这个问题,并且适时的出现,它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口(layout viewport),而这个视口的分辨率接近于PC显示器,Apple将其定义为980px(其他厂商各有不同①)。

这就很好的解决了早期的页面在手机上显示的问题,由于两者之间的宽度趋近,CSS只需要像在PC上那样渲染页面就行,原有的页面结构不会被破坏。

①的描述大致如下,数值不一定持续准确,厂商可能更改,但这个绝对值其实并非特别重要:
iOS, Android基本都是: 980px
BlackBerry: 1024px

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" ";

布局视口

一个没有为移动端做优化的网页,会尽可能缩小网页让用户看到所有东西。这是我的手机查看博客园的样子,你也可以在Chrome中以移动开发模式看到。

图片 4

浏览器厂商为了让用户在小屏幕下网页也能够显示地很好,所以把视口宽度设置地很大,一般在 768px ~ 1024px 之间,最常见的宽度是 980px。

所以,在手机上,视口与移动端浏览器屏幕宽度不再相关联,是完全独立的,这个浏览器厂商定的视口被称为布局视口

图片 5

布局视口我们是看不见的,只知道网页的最大宽度是 980px ,并且被缩放在了屏幕内。

可以这样设置布局视口的宽度:

XHTML

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

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

媒体查询与布局视口

700px 指的是布局视口的宽度

CSS

@media (min-width: 700px){ ... }

1
2
3
@media (min-width: 700px){
    ...
}

document.documentElement.clientWidth/Height返回布局视口的尺寸

visual viewport

有了layout viewport,我们还需要一个视口用来承载它,这个视口可以简单的认为是手持设备物理屏幕的可视区域,我们称之为(视觉视口)visual viewport。这是一个比较直观的概念,因为你能看得见你的手机屏幕。

对于visual viewport,开发者一般只需要知道它的存在和概念就行,因为无法对它进行任何设置或者修改。很明显,visual viewport的尺寸不会是一个固定的值,甚至每款设备都可能不同。大致列几种常见设备的visual viewport尺寸:

  • iPhone4~iPhone5S: 320*480px
  • iPhone6~iPhone6S: 375*627px
  • iPhone6 Plus~iPhone6S Plus: 414*736px

iPhone4S为例,会在其320px②的visual viewport上,创建一个宽980pxlayout viewport,于是用户可以在visual viewport中拖动或者缩放网页,来获得良好的浏览效果;布局视口用来配合CSS渲染布局,当我们定义一个容器的宽度为100%时,这个容器的实际宽度是980px而不是320px,通过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。

②的描述大致如下:
早期移动前端开发工程师常能见到宽640px的设计稿,原因就是UI工程师以物理屏幕宽度为320px的iPhone4-iPhone5S作为参照设计;
当然,现在你还可能会见到750px和1242px尺寸的设计稿,原因当然是iPhone6的出现

当然,为了更好的适配移动端或者只为移动端设计的应用,单有布局视口和视觉视口还是不够的。

设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。
  视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签,name="viewport"来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。
  在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。
参数说明:
width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比
minimum-scale:最小缩放比
user-scalable:用户是否可以缩放,yes或no(1或0)

视觉视口

视觉视口是用户正在看到的网页的区域,大小是屏幕中CSS像素的数量。

图片 6


window.innerWidth/Height返回视觉视口的尺寸

ideal viewport

我们还需要一个视口,它类似于布局视口,但宽度和视觉视口相同,这就是完美视口(ideal viewport)。

有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到。

说了这么一大堆的东西,貌似都和viewport有关联,那么viewport到底怎么搞,请继续往下。

关于3个视口,PPK已经做了非常棒的阐释,你也可以在StackOverflow上找到一些对此描述的相互补充,例如:[1], [2],有兴趣的童鞋也可以看看

设置方法如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

理想视口

布局视口明显对用户是不友好的,完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念,它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度,用户进入页面的时候不需要缩放。

现在讨论所谓的『最理想的宽度』到底是多少?其实,如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口:

XHTML

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

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

定义理想视口是浏览器的事情,并不能简单地认为是开发者定义的,开发者只能使用。


screen.width/height返回理想视口的尺寸,有严重的兼容性问题—可能返回两种值:

  1. 理想视口的尺寸(下载浏览器)
  2. 屏幕的设备像素尺寸(内置浏览器)

Screen size tests和Understanding viewport可以测试你的设备的screen.width值,同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器(如UC、Chrome)之间。

默认浏览器是安卓系统内置的浏览器,长下面那个样子。而且它使用的是Webkit而不是Blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3,Google不再更新。

图片 7

而下载浏览器都返回的是理想视口尺寸。

viewport特性

通常情况下,viewport有以下6种设置。当然厂商可能会增加一些特定的设置,比如iOS Safari7.1增加了一种在网页加载时隐藏地址栏与导航栏的设置:minimal-ui,不过随后又将之移除了。

Name Value Description
width 正整数或device-width 定义视口的宽度,单位为像素
height 正整数或device-height 定义视口的高度,单位为像素
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes

使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

缩放

width

width被用来定义layout viewport的宽度,如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为厂商默认值。如:iPhone为980px

举个例子:

XHTML

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

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

此时的layout viewport将成为ideal viewport,因为layout viewport宽度与设备视觉视口宽度一致了。

除了width之外,还有一个属性定义也能实现ideal viewport,那就是initial-scale

但是为了更好的兼容,我们会使用完整的viewport设置。
代码如下:

缩放与设备像素、CSS像素的关系

缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素无论放大,还是200个CSS像素。但是因为这些像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。

height

width类似,但实际上却不常用,因为没有太多的use case。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

缩放与视口

缩放会影响视觉视口的尺寸

页面被用户放大,视觉视口内CSS像素数量减少;被用户缩小,视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。

用户缩放不会影响布局视口

注意,这是『用户缩放』,后面会说开发者设置缩放的情况

initial-scale

如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale来完成。

initial-scale用于指定页面的初始缩放比例,假定你这样定义:

XHTML

<meta name="viewport" content="initial-scale=2" />

1
<meta name="viewport" content="initial-scale=2" />

那么用户将会看到2倍大小的页面内容。

在说width的时候,我们说到initial-scale也能实现ideal viewport,是的,你只需要这样做,也可以得到完美视口:

XHTML

<meta name="viewport" content="initial-scale=1" />

1
<meta name="viewport" content="initial-scale=1" />

当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。

缩放比例

我们在开发者工具中可以在这里查看缩放比例:

图片 8

这里的 0.3 是相对于理想视口的。

在下载浏览器中,可以这么算(理想视口与视觉视口的比):

JavaScript

zoom level = screen.width / window.innerWidth

1
zoom level = screen.width / window.innerWidth

maximum-scale

在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。

maximum-scale用于指定用户能够放大的比例。

举个例子来讲:

XHTML

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

1
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

假设页面的默认缩放值initial-scale1,那么用户最终能够将页面放大到这个初始页面大小的5倍。

禁止缩放

XHTML

<meta name="viewport" content="user-scalable=no">

1
<meta name="viewport" content="user-scalable=no">

minimum-scale

类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。

通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。

设置缩放

XHTML

<meta name="viewport" content="initial-scale=2">

1
<meta name="viewport" content="initial-scale=2">

使用initial-scale有一个副作用:同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1width=device-width的效果是一样的。

user-scalable

如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no

使用方法如下:

XHTML

<meta name="viewport" content="user-scalable=no" />

1
<meta name="viewport" content="user-scalable=no" />

完美视口

解决各种浏览器兼容问题的理想视口设置

XHTML

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

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

结语

正如开篇所说,这既不高深也不新奇,它而仅仅是一点观念转变。

当你掌握了viewport,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。

2 赞 15 收藏 2 评论

图片 9

设备像素比

在谈到像素的时候,讲到除了缩放,屏幕是否为高密度也会影响设备像素和CSS像素的关系。

缩放程度为100%(这个条件很重要,因为缩放也会影响他们)时,他们的比例叫做设备像素比(device pixel ratio):

dpr = 设备像素 / CSS像素

1
dpr = 设备像素 / CSS像素

可以通过JS得到: window.devicePixelRatio

设备像素比也和视口有关:

dpr = 屏幕横向设备像素 / 理想视口的宽

1
dpr = 屏幕横向设备像素 / 理想视口的宽

总结

这一篇介绍了移动端适配需要掌握的知识,先说明了移动端存在的两种像素,然后介绍了三种视口,由缩放对视口的影响引入理想视口,最后说明设备想告诉比。下一篇介绍现在市面上的适配方案。

参考文章

  • ppk的移动端系列文章
  • screen.width is useless
  • devicePixelRatio
  • More about devicePixelRatio
  • screen sizes 收集了很多手机的信息

下面这些文章可能也会对你有帮助:

  • 移动前端开发之viewport的深入理解
  • 深入了解viewport和px

    1 赞 9 收藏 评论

关于作者:risker

图片 10

2014年大学毕业,现在在北京某互联网公司从事前端开发的工作,近半年主要做移动web开发。微博粉丝太少,求粉。 个人主页 · 我的文章 · 7 ·   

图片 11

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:移动端适配方案,移动前端第一弹

关键词:

上一篇:没有了

下一篇:没有了