手机端页面meta标签

1、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。
说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?
viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域
2、<meta name="format-detection" content="telephone=no">
当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。
在 iPhone 上默认值是:
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:
<meta name="format-detection" content="telephone=no"/>
3、<meta name="apple-mobile-web-app-capable" content="yes" />
说明:网站开启对web app程序的支持。
4、<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
在web app应用下状态条(屏幕顶部条)的颜色;
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

原文地址:https://www.cnblogs.com/mo3408/p/9892116.html

时间: 2024-11-05 14:56:31

手机端页面meta标签的相关文章

手机端的META你有多了解?

我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签: 一.天猫 1 <title>天猫触屏版</title> 2 <meta content="text/html; charset=utf-8" http-equiv="Co

手机端的META差异

手机端的META你了解多少? 我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看看各大网站手机端的meta标签:一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equi

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

wap手机端页面根据dpr和宽度计算出font-size对应数值

最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下. wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度540px 系数 1 20px 33.75px 0.0625 2 40px 67.5px 0.125 3 60px 101.25px 0.1875 备注: 1.是按照倍数关系增加的 2.手机淘宝就是按

嵌套移动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

手机端页面切图

针对手机端页面,通常情况下,需要对设计图片切两种图片. ①:dpr:2------切两倍图(即设计原图大小,因为设计图是按原来的手机尺寸放大两倍之后的)  一般保存为[email protected] ②:dpr:3------切三倍图(即设计原图大小的1.5倍,因为设计图是按原来的手机尺寸放大两倍之后的)     一般保存为[email protected] 淘宝的做法: 例如:设计图是720px的宽度. 由于设计图是放大两倍的.所以一倍的大小是=720/2 = 360px; 放大三倍图就是=

web前端课程技术内容之如何做一个简单的手机端页面的翻页

[如何做一个简单的手机端页面的翻页] 第一步:创建移动端页面内 HTML + CSS [注]可用弹性布局 但需要注意的是 外层盒子的定位 第二步: 思考问题 要实现怎样的效果? 1. 手指滑动时触发事件[左右]两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步:编写JS代码 添加监听事件 document.addEventListener('DOMContentLoaded',function(){ 创建一个数组用于调用数组属性值 或者

手机端的META你知道多少?

一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use