美文网首页
移动端meta标签配置

移动端meta标签配置

作者: 颂温暖 | 来源:发表于2019-05-27 16:39 被阅读0次

网上搜索了下,整理下移动端页面,需要注意的

控制显示区域各种属性:

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

width - viewport的宽度(范围从 200 到 10,000,默认为 980 像素)

height – viewport的高度(范围从 223 到 10,000 )

initial-scale - 初始的缩放比例(范围从 > 0 到 10)

minimum-scale - 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放(no,yes||0,1)
[attachimg]

1.http-equiv 属性的 Content-Type 值(显示字符集的设定)

说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。

用法:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。

[attachimg]

2.name 属性设置作者姓名及联系方式

<meta name="author" contect="liudanyun, liudy102@163.com" />

[attachimg]

3.忽略将数字变为电话号码:

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

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

[attachimg]

4.IOS中Safari允许全屏浏览:

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

[attachimg]

5.IOS中Safari顶端状态条样式:

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

[attachimg]

6.使用特殊链接:

如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>

或用于单元格:

<td onclick="location.href='tel:122'">

如果哪里有需要补充的请下方留言!谢谢!

相关文章

  • 移动端meta标签配置

    网上搜索了下,整理下移动端页面,需要注意的 控制显示区域各种属性: width ...

  • viewport

    移动端viewport meta 标签

  • 移动端知识概括

    移动端地图 这两个文件是用来做移动端地图 移动端meta标签   meta标签常用于定义页面的说明,关键字,最后修...

  • 移动端meta标签

    天猫 淘宝 京东 网易 百度

  • 移动端布局适配

    一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影...

  • Bootstrap框架

    *移动端设备优先 *使用前需在head标签中添加viewport元数据标签和通过meta属性禁用移动端界面缩放功能...

  • Vue.js开发移动端经验总结

    一、移动端适配 在移动端我们经常可以在head标签中看到这段代码: 通过meta标签对viewport的设置,定义...

  • web移动端布局之流式布局

    移动端布局之流式布局meta视口标签,写移动端布局必须加入视口标签: 二倍图:在移动端布局中,我们需要一个5050...

  • 阿里前端工程师总结HTML5:meta标签。网友:“666”!

    下面就是总结HTML5的标签: 一些常用的移动端的meta属性设置

    一些常用的移动端的meta...

  • 移动端标签设置

    声明文档的字符编码: 为移动设备添加 viewport 优先使用 IE 最新版本和 Chrome: 页面描述: 页...

网友评论

      本文标题:移动端meta标签配置

      本文链接:https://www.haomeiwen.com/subject/qunhtctx.html