我的HTML学习记录（三）

物理像素：设备像素，显示设备中最微小的物理部件
css像素：用于控制元素样式的单位，是一个相对值。当页面没有缩放时，设备无关像素等于CSS像素
设备独立像素：可以与物理像素通过DPR转换

DPR设备像素比=物理像素/设备独立像素

PPI屏幕像素密度=根号下X的平方加Y的平方除以英寸

Viewport： 视口
移动设备中：Viewport大部分默认为980
layout viewport：用于渲染控制
visual viewport：可视窗口

<!--重点
设置布局viewport的宽度等于设备宽度 width=device-width，
默认缩放比为一 initial-scale=1.0，
最大缩放比为1 maximum-scale=1，
最小缩放比为1 minimum-scale=1，
用户禁止缩放 user-scalable=no。（ios10中的sarifi浏览器失效）
-->
写法：<meta name="viewport" content="width=device-width,initial-scale=1.0，maximum-scale=1,user-scalable=no"/>

<!--禁止设备将疑似手机号邮箱进行识别。取消点击拨打电话等事件-->
<meta name="format-detection" content="telephone=no,email=no"/>

<!--ios添加到主屏幕时候，webAPP 的标题-->
<meta name="apple-mobile-web-app-title" content="标题"/>

<!--ios添加到主屏幕时候，webAPP 的icon图标-->
<link rel="apple-touch-icon-precomposed" href=""/>

<!--ios添加到主屏幕时候 启用webapp全屏模式，删除顶端地址栏和底部工具栏-->
<meta name="apple-mobile-web-app-capable" content="yes"/>

<!-- ios添加到主屏幕时候 顶部状态栏的样式
可选值：black-translucent半透明（网页会充满整个屏幕，颈部状态栏会遮挡网页头部）/default（white）/black
-->
<meta name="apple-mobile-web-app-status-bar-style" content="white"/>

<!--设置浏览器使用最新的IE和chrome去编译
》》》不是手机端专用，PC端一般也设-->
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>

<!--其他几个meta标签 了解-->
<!--设置浏览器过期时间，-1表示时刻过期，即每次刷新都要请求最新数据-->
<!--是否设置浏览器缓存 否-->
<!--是否从本机读取缓存文件 否-->
<meta http-equiv="expires"content="-1"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>

移动端字体选择
一般手机均不支持微软雅黑，中文字体无需设置，使用手机默认即可
英文字体 一般选body{font-family：Helvetica}

/*禁止选中文本
手机端：禁止长按选中
电脑端：禁止鼠标选择*/
-webkit-user-select:none ;
-moz-user-select: none;
/*去除表单默认外观
手机电脑均可使用
*/
-webkit-appearance: none;

}
/*禁止长按连接，图片弹出连接*/
a,img{
-webkit-touch-callout: none;
}

转载于:https://www.cnblogs.com/lieyancjj/p/6624498.html