移动web学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动web学习笔记相关的知识,希望对你有一定的参考价值。

viewport:

一、viewport其实就是把你整个页面渲染到一个比例比较大的viewport里面,通过缩放让你看的到整个页面。ios的viewport为980px。android的不一定,有640px 1000px  或者更大。

一些设备上浏览器的默认viewport的宽度如下:

技术分享

实际上,在移动设备上看这样一个页面时,手机浏览器为我们默认做了两件事情:

(1)、把页面渲染在一个980px(IOS)的viewport里面

(2)、渲染完后,通过缩放让我们看到整个页面的全貌。

有些人可能会说,那直接缩放就好了为什么还要渲染?那是因为直接把一个一千多像素的页面缩放到一个300多像素的屏幕上,排版会乱掉,样子通常看起来也会很丑。所以为了排版正确,引入了viewport,先让排版正确后再缩放到移动设备屏幕上。

二、viewport一般分为三个viewport: 布局viewport 、视觉viewport及理想viewport

1、布局viewport ,在手机上,为了容纳为桌面浏览器设计的网站,默认的布局视口宽度。注意,它不是页面的宽度,IOS下默认为是980px。我们可以通过document.documentElement.clientWidth来获取到布局viewport的值。

2、视觉viewport,与屏幕宽度一样宽,代表 浏览器可视区域的大小,但它的css像素的数量会随着用户缩放而改变。也可以理解为窗口缩放 scale。注意,它并不是设备的宽度。我们可以通过window.innerWidth来获取视觉viewport的值

3、理想 viewport是最适合移动设备的viewport,宽度等于移动设备的屏幕宽度。理想viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对理想 viewport而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。我们可以通过screen.width来获取理想viewport的值。

三、我们为什么不使用默认的布局viewport呢?

1) 宽度不可控制。不同的系统不同设备的默认值都可能不同。比如android可能有640,1000或者更大。

2) 页面缩小显示,不友好

3) 链接不可点

4) 有缩放,缩放后有滚动条。

四、meta标签

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

width: 设置布局 viewport  的宽度,为一个正整数,或字符串"device-width"

initial-scale:设置页面的初始缩放值,为一个数字,可以带小数

minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数

maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数

user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

Initial-scale: 设置页面的初始缩放值。首先要弄明白这个缩放是相对于什么来缩放的,答案是相对于 理想 viewport来进行缩放的,缩放值越大,当前视觉viewport的宽度就会越小,反之亦然。例如在iphone中,理想 viewport的宽度是320px,如果我们设置 initial-scale=2 ,此时视觉viewport的宽度会变为只有160px了,这也好理解,放大了一倍嘛,就是原来1px的东西变成2px了,但是1px变为2px并不是把原来的320px变为640px了,而是在实际宽度不变的情况下,1px变得跟原来的2px的长度一样了,所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此,我们可以得出一个公式:

视觉viewport =  理想viewport/ 当前缩放值

当前缩放值 =理想viewport/视觉viewport

当前缩放值 = screen.width / window.innerWidth

在iphone和ipad上,无论你给viewport设的宽的是多少,如果没有指定默认的缩放值,则iphone和ipad会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

综上所述,如果我不给设定initial-scale的值,设备会根据你页面的大小自动调整缩放比,因而,不同设备下的视觉viewprot就会不同,这不是我们想要的结果,所以我们所以我们就把initial-scale=1 ,来统一缩放比,让我们的视觉viewport等于设备viewprot.

所以我们最完美的写法是:

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

以上是关于移动web学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

移动web学习笔记

移动web学习笔记

HTML5与移动端web学习笔记

[原创]java WEB学习笔记11:HttpServlet

[原创]java WEB学习笔记10:GenericServlet

Python Web学习笔记之WebSocket原理说明