移动端适配 | 前端进阶之旅 - 前端求职面试刷题宝典

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

@前端进阶之旅: 代码已经复制到剪贴板

width=device-width 设备宽度 640px(低版本的安卓手机不支持数字) 这个属性在不支持IE
initial-scale=1.0(初始缩放比),能够起到和width=device-width相同的效果(把理想的视窗设置为设备的宽度) 两个配合使用就能够很好的解决移动端各设备的适配问题
maximum-scale=1.0 最大缩放比例
user-scalable=0 禁止缩放
minimum-scale=1.0 最小缩放比例

1、流式布局与设备等宽做自适应 100%或者具体的像素值
2、rem做盒子的宽度，viewport缩放
3、固定宽度 viewport缩放 content="width=640, initial-scale=0.5, maximum-scale=0.5, user-scalable=0" （用的比较少）
4、vw/vh 相对于viewport理想视窗(设备)的比例(兼容性不好) 1vw = 10%设备宽 10vw

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

<meta name="referrer" content="never">

@前端进阶之旅: 代码已经复制到剪贴板

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

@前端进阶之旅: 代码已经复制到剪贴板

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

@前端进阶之旅: 代码已经复制到剪贴板

<meta name="apple-touch-fullscreen" ="yes">

@前端进阶之旅: 代码已经复制到