关于页面的相关设置
lang 属性可用于大部分 HTML 标签，当html 标记为 en 时，谷歌会提醒翻译
<html lang="zh-CN">关键字，关键词:对搜索引擎友好，在爬虫进行网站收录时会进行标记
<meta name="keywords" content="关键字1,关键字2,关键字3">网站内容描述
<meta name="description" content="对页面的简单的一句话描述">标注页面的作者
<meta name="author" content="Xianbin Li">设置手机页面的 viewport 缩放比例
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">常见屏幕大小参考
/* device-width 真实显示屏大小 */
/* width 浏览器大小 */
/*彩色设备 and 大于等于1920px的屏幕*/
@media screen and (min-width:1920px){ }
/*小于于等于1920px的屏幕 and 大于等于1680px的屏幕*/
@media (max-width:1920px) and (min-width:1680px){ }
@media (max-width:1680px) and (min-width:1366px){ }
@media (max-width:1366px) and (min-width:1024px){ }
@media (max-width:1024px){ }
/*ipad pro*/
@media screen and (max-device-width:1024px) and (min-device-width:769px) { }
@media screen and (max-width:1024px) { }
/*ipad*/
@media screen and (max-device-width:768px) and (min-device-width:450px) { }
@media screen and (max-width:768px) { }
/*大部分手机*/
@media screen and (max-device-width:450px){ }
@media screen and (max-width:450px) { }关于手机和 PC 的判断
window.location.href = /Android|webOS|iPhone|ipod|ipad|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "http://news.baidu.com/";
//如果是手机端则去百度，不是则去新闻关于屏幕大小属性参考
# 浏览器窗口大小（包括工具栏）
window.outerHeight
window.outerWidth
# 窗口文档显示区（不包含滚动条）
window.innerWidth
window.innerHeight
# 元素级内部大小（不包含滚动条）
clientWidth
clientHeight关于手机横竖屏的判断
# 手机转向角度
window.orientation
# PC 端为 undefined；90或-90为横屏幕，剩下则是竖屏关于屏幕的相关说明
手机的像素 分辨率在640*1136是物理像素
电脑上的px 逻辑像素，浏览器使用的抽象像素手机浏览器默认做了两件事
【1】页面渲染在一个980px(ios)的 viewport；【2】缩放
DPI：打印机每英寸可以喷的墨汁点
PPI：屏幕每英寸的像素数量，即单位英寸的像素密度，PPI越高，图像越清楚
| - | ldpi(流畅) | mdpi(普通) | hdpi(高清) | xhdpi(超清) |
|---|---|---|---|---|
| ppi | 120 | 160 | 240 | 320 |
| dpr | 0.75 | 1.0 | 1.5 | 2.0 |
注：高清屏默认缩放比都是2.0