<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu
// width 设置viewport宽度,为⼀个正整数,或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport⾼度,⼀般设置了宽度,会⾃动解析出⾼度,可以不⽤设置
// initial-scale 默认缩放⽐例(初始缩放⽐例),为⼀个数字,可以带⼩数
// minimum-scale 允许⽤户最⼩缩放⽐例,为⼀个数字,可以带⼩数
// maximum-scale 允许⽤户最⼤缩放⽐例,为⼀个数字,可以带⼩数
// user-scalable 是否允许⼿动缩放
延伸提问
怎样处理 移动端 1px 被 渲染成 2px 问题
局部处理
- mate 标签中的 viewport 属性 , initial-scale 设置为 1
- rem 按照设计稿标准⾛,外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可;
全局处理
- mate 标签中的 viewport 属性 , initial-scale 设置为 0.5
- rem 按照设计稿标准⾛即可
扩展:
<!DOCTYPE html> <!--H5标准声明,使⽤ HTML5 doctype,不区分⼤⼩写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明⽂档使⽤的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使 <meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述-->
<meta name=”keywords” content=””/> <!-- ⻚⾯关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--⽹⻚作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启⽤ WebApp 全屏模式,删除苹果默认的⼯具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=
<!--添加智能 App ⼴告条 Smart App Banner(iOS 6+ Safari)-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果 <meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使⽤兼容模 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码- <meta name=”HandheldFriendly” content=”true”> <!--针对⼿持设备优化,主要是针 <meta name=”MobileOptimized” content=”320″> <!--微软的⽼式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应⽤模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone
设置⻚⾯不缓存-->
<meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>