移动端、PC端理解
概念：
1.CSS像素（单位 px）
PC端：1px = 1 物理像素
iphone3：分辨率320*480、1px = 1 物理像素
iphone4：分辨率640*960、屏幕尺寸不变1px = 2 物理像素
2.物理像素
表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高密度显示图像
3.分辨率
显示器所能显示的像素多少，像素越多画面约精细，同屏幕区域所能显示的信息就越多
4.devicePixelRatio（浏览器存在兼容问题）
window.devicePixelRatio = 物流像素 / css像素 在iphone4中devicePixelRatio = 2；（1px = 2 物理像素）
5.layout viewport
移动设备默认viewport，document.documentElement.clientWidth 获取
6.visual viewport
代表浏览器窗口尺寸，当用户放大浏览器时，尺寸会变小 window.innerWidth 获取
7.ideal viewport（宽度等于设备宽）
屏幕尺寸，单位为物理像素
在该viewport中用户不用缩放就可正常查看网站
如何实现屏幕自适应
<meta name="viewport" content="width=device-width">
viewport 中有6个通用属性：
- width 设置layout viewport的宽度 正整数或字符串 ‘width-device‘
- initial-scale 设置页面的初始缩放值，数字或小数
- minimum-scale 允许用户的最小缩放值 数字或小数
- maximum-scale 允许用户的最大缩放值 数字或小数
- height 设置layout viewport 的高度，这个属性很少用到
- user-scaleabel 是否允许用户进行缩放 ‘no‘或‘yes’ 还有2个需要特别注意的两个属性
-
target-densitydpi 在andriod 4.0一下的设备中，不支持设置viewport的width，android 自带浏览器支持设置 target-densitydpi来达到目的；
target-densitydpi = UI-width/device-width*window.devicePixelRation*160
//UI-width: 布局宽度
//device-width:屏幕分辨率宽度 iphone4为640
//target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放
- miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏
相关代码解析
//移动页面设计 480*854的比例 //dpi = 480/screen.width*window.devicePixelRatio*160; //scalevalue = screen.width/480; //控制适配 分为5种组合 /* width ＋ target-densitydpi(计算出来的) */ <meta name="viewport" content="width=480,target-densitydpi=dpi,minimal-ui"> /* width */ <meta name="viewport" content="width=480,minimal-ui"> /* width+target-densitydpi=device-dpi */ <meta name="viewport" content="width=480,targrt-densitydip=device-dip,minimal-ui"> /* width+initial-scale */ <meta name="viewport" content="width=480,initial-scale=scalevalue,maximum-scale=scalevalue,minimum-scale=scalevalue,minimal-ui"> /* targrt-densitydpi */ <meta name="viewport" content="targrt-densitydpi=dpi,minimal-ui"> //通过顺序设置5次来实现适配 直到 Math.abs(window.innerWidth-480)<=10 表示viewport设置正确了。
判断横竖屏
/*横屏展示*/ @media screen and (orientation:landscape){ body{background: orchid;} } /*竖屏展示*/ @media screen and (orientation:portrait) { body{background: yellowgreen;} } /*某个尺寸的特色样式 竖屏时宽为768px,符合一般ipad的条件*/ @media only screen and(orientation:portrait) and(device-width:768px){ body{background: #0066FF;} } /*平时使用*/ @media (max-width: 767px) { body{background: red;} }
//屏幕方向：0默认横屏 var orientation = 0; //转屏 function screenOrientationEvent(){ if(orientation == 0){ console.log("竖") }else{ console.log("横") } } var innerWidthTmp = window.innerWidth; //监听 function screenOrientationListener(){ try{ var iw = window.innerWidth; //屏幕方向改变时处理 if(iw != innerWidthTmp){ if(iw > window.innerHeight){ orientation = 90; }else{ orientation = 0; } //调用转屏 screenOrientationEvent(); innerWidthTmp = iw; } } catch(e){ console.log(e) } //间隔500毫秒检测是否转屏 setTimeout("screenOrientationListener()",500) } //启动监听 screenOrientationListener()
//<body onload="screenOrientationEvent()">
