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

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

 

 

一、像素基本知识

 

设备物理像素：设备上的一个像素点

 

设备无关像素：可以与物理像素通过dpr转换（当dpr为1时，设备无关像素=设备物理像素）

 

CSS像素：CSS中使用的抽象概念，当页面无缩放时，CSS像素=设备无关像素

 

 

 

设备像素比dpr=物理像素/设备无关像素

 

 

 

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

 

设置布局viewport的各种信息

 

 

 

width=device-width 宽度等于设备宽度

 

initial-scale=1.0 默认缩放比为1（目的：让CSS像素=设备无关像素）

 

maximum-scale=1 最大缩放比为1

 

minimum-scale=1 最小缩放比为1

 

user-scalable=no 用户禁止缩放（iOS中的sarifi浏览器中失效）

 

 

 

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

 

 

 

 

 

三、其他

 

1、

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

 

<meta name="format-detection" content="telephone=no,email=no" />

 

2、

 

ios添加到主屏幕时，WebAPP的标题

 

<meta name="apple-mobile-web-app-title" content="标题" />

 

ios添加到主屏幕时，WebAPP的图标

 

<link rel="apple-touch-icon-precomposed" href="../img/ivicon.png" />

 

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

 

<meta name="apple-mobile-web-app-capable" content="yes" />

 

ios添加到主屏幕时，WebAPP顶端状态的样式

 

只有三个属性值：black/ white/ black-translucent（灰色半透明，顶部状态栏会遮挡网页顶部一部分）

 

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

 

3、

设置浏览器使用最新的IE和chrome去编译（非手机端专用，PC站也需要设置）

 

<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1" />

 

4、

其他几个meta标签

 

<!--设置浏览器过期时间，-1为随时刷新-->

 

<meta http-equiv="expires" content="-1" />

 

<!--是否设置浏览器缓存，否-->

 

<meta http-equiv="Cache-Control" content="no-cache" />

 

<!--是否设置本地缓存，否-->

 

<meta http-equiv="Pragma" content="no-cache" />