移动端-新建空白页面meta各个标签详细解读

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />

viewport

视图窗口，移动端特属的标签。一般使用下面这段代码即可：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。

width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素
height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000
initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // float_value，允许用户缩放到的最小比例
maximum-scale – // float_value，允许用户缩放到的最大比例
user-scalable – // [yes | no] 用户是否可以手动缩放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度

注：target-densitydpi屏幕像素密度和缩放有关，你可以试试修改这个demo，用手机看下实际效果。我一般不设置这个属性。

apple-mobile-web-app-capable

是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。

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

apple-mobile-web-app-status-bar-style

当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

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

注：如果对apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查阅下面的参考资料第三篇文章，里面有截图说明。

telephone & email

忽略页面中的数字识别为电话号码

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

同样还有一个email识别

<meta name="format-detection" content="email=no" />

当然两者可以写在一起

<meta name="format-detection" content="telphone=no, email=no" />

其他meta

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

参考资料：

link标签

apple-touch-icon

如果apple-mobile-web-app-capable设置为yes了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。而通过设置相应apple-touch-icon标签，则添加到主屏上的图标就会使用我们指定的图片。

以下是针对ox不同设备，选择一个最优icon。默认iphone的大小为60px，ipad为76px，retina屏乘以2倍。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

图标使用的优先级如下：

  • 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
  • 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
  • 如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下以apple-touch-icon为前缀的png图标。

注：ios7不再为icon添加特效，ios7以前则默认为icon添加特效，除非icon有关键字-precomposed.png为后缀。

参考资料：

apple-touch-startup-image

同样基于apple-mobile-web-app-capable设置为yes，可以用WebApp设置一个类似NativeApp的启动画面。

<link rel="apple-touch-startup-image" href="/startup.png">

和apple-touch-icon不同，apple-mobile-web-app-capable不支持sizes属性，所以使用media来控制retina和横竖屏加载不同的启动画面。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

参考资料：

总结

空白页面模板，然后再根据具体情况在此基础上添加apple-touch-icon和apple-touch-startup-image

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection"content="telephone=no, email=no" />
    <title>Document</title>
</head>
<body>

</body>
</html>
时间： 2024-08-07 10:07:49

移动端-新建空白页面meta各个标签详细解读的相关文章

嵌套移动APP端的H5页面meta标签

嵌套移动APP端的H5页面meta标签小结: <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="apple-mobile-web-app-capable" con

移动端重构系列1——新建空白页面

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+,测试demo html5文档申明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> meta标签 <meta nam

移动开发 新建空白页面

移动端重构系列 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-we

Eclipse 新建.jsp页面后，页面头部标签报错的解决方法

Eclipse 新建.jsp页面后,页面头部标签报错的解决方法 1.报错地方: 2.解决方法: .jsp页面右键==>BUild Path ==>Configure Build Path... 3.接着 4.按步骤操作后.jsp页面就不会报错了 版权声明:本文为CSDN博主「爱吃狼的羊」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/weixin_39890531/article/details/78

在php中，如何将一个页面中的标签，替换为用户想输出的内容

前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例子,就是在php中如何读取另一个html页面中的标签,并显示用户想输出的内容. 首先建立一个页面,命名为:test.html如下图所示: <!doctype html> <html lang="en"> <head> <meta charset=&

我的小前端 （3）—— 移动端特殊效果-让页面宽度自适应

没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 移动端的页面宽度不固定,让页面宽度自适应的方法: 1.直接属性赋值,页面宽度不固定[我常用第一个] <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.页面DIV宽度固定320内,由JS控制缩放.[如果页面太宽,比例变了.个人

移动端网站提升页面加载性能的优化技巧

移动端网站提升页面加载性能的优化技巧 收藏到:1时间:2015-06-17   文章来源:马海祥博客   访问次数:2501 网页性能的优化一直是网站成功的关键,越来越多的研究证明,不管是小型电商,还是大型连锁企业,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验,但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径,低带宽,高延迟,小内存,低处理器性能的移动设

Web端控件,页面传值

一.记忆Web端控件需要配合HTML 中的Form表单元素 Label - 在HTML中被编译成<span> Literal - 在HTML中被编译成空 文本类 文本框      <input type="text">                        TextBox 密码框      <input type="password">                 TextBox 属性TextMode="pa

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状如下: 解决方案如下: MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,布布扣,bubuko.com