移动端常用的meta总结

声明viewport视口 viewport对于移动端设备来说非常的重要,用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width,如果我们不设置的话,width默认的值是980PX,假设我们当前用的是IPHONE 5来访问H5页面,IPHONE 5本身的宽度只有320PX,但是设备定义了H5页面展示的区域宽度应该是980PX,这样的话要想把H5页面全部进行展示,只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差,所以我们设定width=device-width,意思是当前设备屏幕有多宽,那么就按照多宽来渲染页面,这样就不会出现需要靠缩小或者左右移动来看完整个页面了。

     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
width   正整数或device-width    定义视口的宽度,单位为像素
height  正整数或device-height   定义视口的高度,单位为像素
initial-scale   [0.0-10.0]  定义初始缩放值
minimum-scale   [0.0-10.0]  定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale   [0.0-10.0]  定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable   yes/no  定义是否允许用户手动缩放页面,默认值yes

忽略数字自动识别为电话号码 在IOS Safari(其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接。比如:7位数字,形如:1234567;带括号及加号的数字,形如:(+86)123456789;双连接线的数字,形如:00-00-00111;11位数字,形如:13800138000可能还有其他类型的数字也会被识别,但在具体的业务场景中,有些时候这是不必须的,所以你可以关闭电话自动识别,然后在需要拨号的地方,开启电话呼出和短信功能。

关闭电话自动识别:
<meta name="format-detection" content="telephone=no"/>

开启拨打电话/发送短信功能
<a href="tel:123456">立即拨打电话</a>     <a href="sms:123456">立即发送短信</a>

如果同样也需要禁止自动识别邮箱,可以在原来的基础上增加“email=no”。
<meta name="format-detection" content="telephone=no,email=no"/>

开启自动识别邮箱
<a href="mailto:zhufengpeixun@163.com">给我们发邮件</a>

把页面增加到桌面主屏幕 在苹果手机的Safari浏览器中访问一个页面,用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上(就像安装一个APP,在主屏幕上就会有一个操作的图标),这样下一次可以直接点击图标打开页面。(只对IOS有效) 当我们将一个网页添加到主屏幕时,会更希望它能有像App一样的表现,没有地址栏和状态栏全屏显示。

WebApp全屏模式
   <meta name="apple-mobile-web-app-capable" content="yes"/>

设置状态栏颜色

只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的,即白色,网页从状态栏以下开始显示) | black(状态栏将为黑色,网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明,网页将充满整个屏幕,状态栏会盖在网页之上)。

 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

添加到主屏后的图标 IOS系统中对ICON有一套规范,就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”,是IOS设备中统一为所有桌面元素增加的,所以不作为图标单独处理的样式。rel="apple-touch-icon-precomposed"是设定按照设计稿原图的图标显示,rel="apple-touch-icon"是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

<link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>

添加到主屏后的标题

 <meta name="apple-mobile-web-app-title" content="标题"/>

QQ浏览器(X5内核)独有的META

 <meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向     <meta name="x5-fullscreen" content="true"/> //->设置全屏

UC浏览器独有的META

 <meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向     <meta name="full-screen" content="true"/> //->设置全屏     <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条     <meta name="nightmode" content="enable|disable"/> //->夜间模式

强制图片显示:UC浏览器为了节省流量,为用户提供了无图模式,但是如果页面的图片是必不可少的,如验证码的,需要强制浏览器显示图片,可以设置imagemode。通过META设置图片加载方式会作用于整个页面,如果希望对单个图片进行设置,那么可以使用这个<img src="" show="force"/>

<meta name="imagemode" content="force"/>

使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

 <meta name="browsermode" content="application"/>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LEo的网络日志

markdown学习

46180
来自专栏Web项目聚集地

3分钟理解响应式布局

总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了...

13220
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

1.2K180
来自专栏python3

html初识

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

49730
来自专栏小李刀刀的专栏

[译]CSS边框实现“无图化”设计

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

37980
来自专栏PPV课数据科学社区

【高手捷径】Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

39190
来自专栏hightopo

基于 HTML5 WebGL 的 3D SCADA 主站系统

21030
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:升学篇

上一篇《包学会之浅入浅出Vue.js:开学篇》中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧。

35.1K400
来自专栏葡萄城控件技术团队

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位...

30490
来自专栏知晓程序

开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

之前做小程序开发时,需要实现对多行文本进行的折叠的效果(类型微信朋友圈)。主要交互有三点:

19750

扫码关注云+社区

领取腾讯云代金券