移动端meta行的汇总-H5教程-PHP中文网

首页

web前端

H5教程

移动端meta行的汇总

零下一度

Jun 27, 2017 am 10:04 AM

meta大全移动

<span class="xml"><span class="hljs-tag"><span style="font-size: 16px"><</span><span class="hljs-name"><span style="font-size: 16px">meta </span><span class="hljs-attr"><span style="font-size: 16px">name=</span><span class="hljs-string"><span style="font-size: 16px">"viewport" <br/></span><span class="hljs-attr"><span style="font-size: 16px">content=</span><span class="hljs-string"><span style="font-size: 16px">"width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /></span> </span></span></span></span></span></span></span>

　
width: viewport 的宽度（范围从 200 到 10,000 ，默认为 980 像素）

height: viewport 的高度（范围从 223 到 10,000 ）

initial-scale: 初始的缩放比例（范围从>0到 10 ）

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

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

user-scalable: 用户是否可以手动缩放

58813ed86a1cdd2991602428c6fba2c8

4b7bea8e5b9e922974f8f3271c21a707

81551c7f21328e13998564eb52591507

50dff0792ccf24b265db074557dcc885

bb16cb682fc13121c2af2bcac3c73318

b36db6ab452c01e5a40ff272d15e005a

e8731b4011cd50bc7354139bbed997b1

1b8c2e8cb9bd572efe6f48c4d3b410d4

6f19cd5619a035d8b683e643dcc4d8da

c6dcd67109559a18a8048d9c3cc69fce

54af9b16ddd0e25579a8280d308bb766

41c894ba030a1f17c64635b1a4411769

f632f7f0b9d3af18261c230db4d877e4

9641a06f605363bb053a39bd4ed4a37e

3be35764d5c427c79861dc1ee87b4e51

e93148c6083a95e98275071b4aeea5f6

ad37309dc259cee1549f4dc6ed78b140

082ca483720e1df6e1c06321559a3ed9

101a94467bdedda930e0e340e30bbb7f

f94e2841cb471d14de1442219220632c

c8f0924f4f81ce3ed4ae81c14aaa003f

5d11b99b8fd63f7e0d339028e8820447

ece16451c8faf5b0642a27f086f176a3

98a803cef4b829bcd46bd742170824f9

1. apple-touch-icon
1757cebcee38f01e5579d88a3baa2bfc
如果 apple-mobile-web-app-capable 设置为 yes 了，

那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。

而设置相应 apple-touch-icon 标签，则添加到主屏上的图标就会使用我们指定的图片。

2. apple-touch-startup-image
34f307b10f47c3bbaed9cf9ea6617564
基于 apple-mobile-web-app-capable 设置为 yes ，

可以为WebApp设置一个类似NativeApp的启动画面。

和 apple-touch-icon 不同，

apple-mobile-web-app-capable 不支持sizes属性，

要使用media来加载不同的启动画面。

// iPhone
4bfaa273112ebbc00e23a7aef819b958

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

以上是移动端meta行的汇总的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。