手机端H5 header定义样式

 <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" content="no" />
 <meta name="format-detection" content="telephone=no,email=no,adress=no"/>

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

1. width=device-width  width:可视区域的宽度,值可为数字或关键词device-width(设备宽度)

2. initial-scale=1.0,    intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放。(初始规模)

3. maximum-scale=1.0,   minimum-scale=1.0;可视区域的缩放级别,  maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。

4. user-scalable:是否可对页面进行缩放,no 禁止缩放

5. apple-mobile-web-app-capable:这meta的作用就是删除默认的苹果工具栏和菜单栏。

content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

6. <meta name="format-detection" content="telephone=no,email=no,adress=no"/>

format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:

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

meta name="format-detection" content="email=no"

meta name="format-detection" content="adress=no"

也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"

下面具体说下每个设置的作用:

一、telephone

你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

telephone=no就禁止了把数字转化为拨号链接!

telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

二、email

告诉设备不识别邮箱,点击之后不自动发送

email=no禁止作为邮箱地址!

email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

三、adress

adress=no禁止跳转至地图!

adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

时间: 2024-10-14 07:27:15

手机端H5 header定义样式的相关文章

【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽了,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视频广告!),之前用canvans渲染,感觉不够太完美,又弄成背景切换形式得(用背景切换形式可以完美解决当一个容器有transform:rotate(90deg)属性时自适应百分比问题,若是canvans需去计算高宽太麻烦还需考虑不同系统). 想要手机端h5播放时不自动全屏比想象的简单,看加粗部分,一

iPhone X 适配手机端 H5 页面通用解决方案

一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战. 对于手Q中的各业务来说,受iPhone X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢? 目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下: 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone X在状

手机端h5适配&lt;mete&gt;标签

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

手机端H5获取当前城市的方法

移动端的H5页面提供了定位的功能,那么如何实现一个最简单的需求-----获取用户当前城市? 你可能搜一下就会找到N篇博客介绍,但是你会发现你看完大段代码之后还是没搞清楚,为了便于大家理解,我精简了代码,只保留了必要的部分. 1.在html页面引入百度地图API(文档地址:http://developer.baidu.com/map/wiki/index.php?title=jspopular/guide/introduction) <script src="http://api.map.b

手机端H5页面常见问题

1.Android点击图片或按钮和输入框的时候,会有阴影框的效果 解决方法: img,input,button{ -webkit-tap-highlight-color: transparent; }

手机端 H5上传头像

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name = "viewport" content= "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

vue+node开发手机端h5页面开发遇到的坑

一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17px; display: inline-block; border-radius: 5px; height: 18px; line-height: 18px; margin-top: 15px; max-height: 18px; max-width: 90%; white-space:nowrap; text-overflow:ellipsis; over

h5实现手机端等级进度条

h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: var Config = { // 等级大图片url地址 courierRankBigUrl: 'images/grade2-icon.png', // 配送员等级名称 courierRankName: '3级鲜锋官', // 同时可接单数 courierCanPackgeCountDoing:

修改手机端radio 样式

实现手机端radio样式修改 http://www.iconfont.cn/搜索对勾图片和圆圈图,分别命名为radio.png 和 select.png 填写自己要的颜色,点击下载png,一般人都会 <span class="address-radio checked"></span> <input type="radio" name="address" class="hide"> .add