震惊，正儿八经的网页居然在手机上这样显示！

本篇文章所描述的&＃xff0c;是网页移动端开发中的一些概念&＃xff0c;以及一些常用标签~

一、像素基本知识

设备物理像素&＃xff1a;设备上的一个像素点

设备无关像素&＃xff1a;可以与物理像素通过dpr转换&＃xff08;当dpr为1时&＃xff0c;设备无关像素&＃61;设备物理像素&＃xff09;

CSS像素&＃xff1a;CSS中使用的抽象概念&＃xff0c;当页面无缩放时&＃xff0c;CSS像素&＃61;设备无关像素

设备像素比dpr&＃61;物理像素/设备无关像素

二、viewport 视口的概念以及在meta标签中的常用设置

设置布局viewport的各种信息

width&＃61;device-width 宽度等于设备宽度

initial-scale&＃61;1.0 默认缩放比为1&＃xff08;目的&＃xff1a;让CSS像素&＃61;设备无关像素&＃xff09;

maximum-scale&＃61;1 最大缩放比为1

minimum-scale&＃61;1 最小缩放比为1

user-scalable&＃61;no 用户禁止缩放&＃xff08;iOS中的sarifi浏览器中失效&＃xff09;

三、其他

1、

禁止设备将疑似手机号/邮箱进行识别&＃xff0c;取消点击拨打电话等事件。

2、

ios添加到主屏幕时&＃xff0c;WebAPP的标题

ios添加到主屏幕时&＃xff0c;WebAPP的图标

ios添加到主屏幕时&＃xff0c;启用WebAPP的全屏模式&＃xff0c;删除顶端地址栏和底部工具栏

ios添加到主屏幕时&＃xff0c;WebAPP顶端状态的样式

只有三个属性值&＃xff1a;black/ white/ black-translucent&＃xff08;灰色半透明&＃xff0c;顶部状态栏会遮挡网页顶部一部分&＃xff09;

3、

设置浏览器使用最新的IE和chrome去编译&＃xff08;非手机端专用&＃xff0c;PC站也需要设置&＃xff09;

4、

其他几个meta标签