关于手机meta

最新推荐文章于 2024-08-09 13:40:47 发布

转载最新推荐文章于 2024-08-09 13:40:47 发布 · 47 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiaosha/p/3963082.html

本文详细介绍了手机网页中viewport、apple-mobile-web-app-capable、apple-mobile-web-app-status-bar-style、format-detection等元信息的含义、作用及用法，并提供了如何在不同设备上实现全屏显示和自定义状态栏样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是手机网页的一些认识

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放
media="(device-height: 568px)"规定目标显示器/纸张的高度

<meta name="apple-mobile-web-app-capable" content="yes">
如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

<meta name="apple-mobile-web-app-status-bar-style" content="black">
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta content="email=no" name="format-detection" />
不希望手机自动将网页中的电话号码（地址，电子邮箱）显示为拨号的超链接

转载于:https://www.cnblogs.com/xiaoxiaosha/p/3963082.html