长度单位
相对长度: px、em、pt(点)
绝对长度:in(英寸)、cm(厘米)
PPI值表示屏幕每英寸的像素数量,越大说明单位尺寸里所能容纳的像素数量就越多,所能展现画面的品质也就越精细,反之越粗糙。
PPI > 320 就是视网膜屏幕即高清屏幕
DP单位:能够在不同的ppi设备上看去大小差不多,是独立像素,在IOS设备上交pt,在Android设备上叫dip/dp
物理像素:指的是屏幕渲染图像的最小单位,属于屏幕的物理属性,不可人为进行改变,但其值大小决定了图片的质量
// 获取屏幕的物理像素尺寸
window.screen.width
window.screen.height
css像素指的是通过css进行网页布局时用到的单位,其默认值(pc端)适合物理像素保持一致的(1个单位的css像素 = 1个单位的物理像素)
视口(viewpo)是用来约束网站中最顶级块元素的,它决定了该标签的大小,用来显示内容。
pc端,视口大小和浏览器一致
// 获取视口的大小
document.documentElement.clientWidth;
document.documentElement.clientHeight;
在移动设备上viewport不再受限于浏览器的窗口,而是允许自由设置大小。
区别iPhone和Android中的viewport,将移动设备的viewport分为layout viewport和ideal viewport
layout viewport (布局视口)是指可以进行网页布局区域的大小,同样是以css像素做为计量单位
// 获取layout viewport 相当于上面默认的视口大小
document.documentElement.clientWidth;
document.documentElement.clientHeight;
ideal viewport(理想视口)设备屏幕区域(以设备独立像素pt、dp做单位)以css像素作为计量单位,其大小是不能被改变。
// 获取ideal viewport
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixclRatio;
移动页面最理想的状态是,避免滚动条且不被默认缩放处理。
解决办法:
<meta name="viewport" content= "">
进行控制,并改变浏览器默认的layout viewport的宽度。
viewport是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案,后来被其他移动设备厂商采纳。用法:
通过设置属性content = “” 实现,中间以逗号隔开
-
设置 width设置layout viewport宽度,其取值可为数值或者device-width
-
设置,网页可以没有被浏览器设置缩放,相当于设置 width = device-width ,故得 initial-scale = ideal viewport / layout viewport
-
因为第二点,为了达到兼容,开发中的写法是:
其他属性: -
maximum-scale 允许用户的最大缩放,例如 maximum-scale = 2
-
minimum-scale 允许用户设置默认情况下的最小缩放,为了一个数字,可以带小数
-
user-scalable 是否允许用户进行缩放,值为“no”| “yes”
移动端写法
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
避免滚动条:不要设置具体的宽度,宽度设置%单位
将浏览器上一个大的页面放到移动端的办法:
- 专门制作一个移动端的页面。
- 做一个响应式
浏览器
移动端开发主要针对IOS和Android两个操作系统平台的,还有一个windows phone
移动端浏览器可分为:系统自带浏览器、应用内置浏览器、第三方浏览器
- 系统自带浏览器:指跟随移动设备操作系统一起安装的浏览器
- 应用内置浏览器:QQ、微信、微薄等这些App里往往会内置一个浏览器,这就是内置浏览器(webview),这个内置的浏览器一般功能比较简单,并且客户端开发人员可以更改这个浏览器的某些设置
- 第三方浏览器:安卓在手机的浏览器,比如Chrome等
【在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基于webkit】