移动端常用meta属性

1.设置当前html文件的字符编码

<meta charset="UTF-8">

2设置浏览器的兼容模式(让IE使用最新的浏览器渲染)

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

基本的属性: 

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">

1.‘viewport’ 
设置显示方式,一般适配移动设备用来避免缩放和影响体验的滚动条 
width=device-width:宽度为设备宽度 
initial-scale: 初始的缩放比例 (范围从>0到 10 ) 
minimum-scale: 允许用户缩放到的最小比例 
maximum-scale: 允许用户缩放到的最大比例 
user-scalable: 用户是否可以手动缩放
2.‘format-detection’ 
忽略页面对手机号、email的识别 
telephone:yes|no 
email:yes|no

Safari浏览器私有meta属性

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="APP name">

1.‘apple-mobile-web-app-capable’ 
隐藏浏览器的地址栏和toolbar,页面显示为全屏,不加此meta则默认显示地址栏和toolbar 
content:yes|no
2.‘apple-mobile-web-app-status-bar-style’ 
content:default|black| black-translucent,即白色、黑色、灰色半透明
3.‘apple-mobile-web-app-title’ 
添加到主屏后的标题

UC浏览器私有meta属性

<meta name="screen-orientation" content="landscape">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="layoutmode" content="fitscreen">
<meta name="nightmode" content="disable">
<meta name="imagemode" content="force">

1.‘screen-orientation’屏幕方向 
强制页面横屏或竖屏显示 
content:landscape|portrait
2.‘full-screen’全屏 
进入全屏后,页面隐藏菜单栏, 生成一个悬浮标, 点击悬浮标可显示菜单栏
3.‘browsermode’应用模式 
应用模式是为方便 web 应用及游戏开发者设置的综合开关,通过 meta 标签进行指示打开,当进入应用模式时,长按菜单、默认手势、夜间模式失效
4.‘layoutmode’排版模式 
UC 浏览器供适屏模式及标准模式,其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快。而标准模式则能按照标准规范对页面进行排版及渲染。 
content:fitscreen|standard
5.‘nightmode’禁用夜间模式 
禁止页面使用 UC 浏览器自定义的夜间模式
6.‘imagemode’强制图片显示 
为了节省流量及加快速度,通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

QQ浏览器私有meta属性

<meta name="x5-orientation" content="landscape">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="default">

1.‘x5-orientation’横竖屏控制 
强制横/竖屏以及跟随浏览器设置【默认】 
content:landscape|portrait|auto
2.‘x5-fullscreen’全屏控制 
强制全屏以及跟随浏览器设置【默认】 
content:true|auto
3.‘x5-page-mode’ 页面模式 
普通浏览模式【默认】以及网页应用模式(定制工具栏,全屏显示) 
content:default|app

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值