1 找到电脑的Ip地址 :打开命令行 Ipconfig
2 找到Ip后 复制 覆盖文件前面的地址
3 二维码生成器 填上地址
4 像素:
设备独立像素:手机的真实大小 window.screen.width/height 在模拟器中会变 在真实手机中不会变
一个点会有多个像素 可以被修改
设备像素: 物理像素 买手机时厂家告诉你的分辨率 是虚拟值 无法获取
像素比: dpi 无法修改 window.devicePixelRatio
ppi 每英寸 能显示的像素数量 越大越清晰
5 viewport
userscable 能否缩放
<meta name="viewport" content="width=device-width,user-scalable=no">
用了缩放后,并不是真正的缩放了,而是改变了屏幕的尺寸(设备的独立像素)
6
在手机中显示的是 :750*dpi
7 示例的网址:http://apeclass.cn/shows/html5-first/index.html# rem布局
http://apeclass.cn/shows/html5-sec/index.html 手机端固定定位
8比例缩放适配
原来的尺寸: currWidth: window.screen.width
想变成的尺寸:targetWidth:375
缩放比例:scale=currWidth/targetWidth
var meta=document.creatElement('meta');
meta.name='viewport';
meta.content="initial-scale"+scale;
document.head.appendChild(meta);
9 rem适配
var html=document.documentElement;
var width=html.getBoundingClientRect().width;
html.style.fontSize=width/16+'px';
iphone5下 1rem=320/16=20Px
如果4个div并列显示 每个的宽度是80px 所以最终是4rem
满屏是16rem
hbuilder自动转换工具
手机端会出现的问题:
1 overflow:hidden 在ios横屏下不起作用
2 固定定位
3 移动端样式重置