网页移动端meta属性基础知识总结分享

2024-04-25 20:19:39

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了网页移动端meta属性基础知识总结分享，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

网页中关于Meta声明有很多妙用是不很多朋友都不太了解的，在2017年09月01号的时候361源码给大家介绍过《织梦DedeCMS文章内容页原创Meta声明标注实现实例》一文，不知道大家是否还有印象，这篇文章介绍的就是通过Meta声明来实现原创保护的。今天361源码要给大家介绍的同样是Meta，但是重点介绍的是网页移动端meta属性基础知识总结。随着移动网络的普及，手机网站越来越普遍，所以361资源觉得很有必要给广大草根咱们“普及”下网页移动端meta属性基础知识:

1、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

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

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

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

3、忽略Android平台中对邮箱地址的识别

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

4、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->

5、将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->

viewport通用模板

<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href="index.css"></head><body>361源码提醒，这里开始内容。</body></html>

viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支持

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 --><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="stylesheet" href="index.css"></head><body>361源码提醒，这里开始内容</body></html>

下面我们哪个案例来具体说明一下：

说明解释：

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

width - viewport的宽度 height - viewport的高度

initial-scale - 初始的缩放比例

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

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

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

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

在web app应用下状态条（屏幕顶部条）的颜色；

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。