源码论坛公告:有很多假冒锦尚中国网址和名称的网站出现,还有声称是跟我们合作网站,请擦亮眼睛避免被骗,本站唯一域名为52jscn.com 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

新版大型房产门户源码下载
知名广告联盟 精准不扣量
企业免备案主机仅需80元
亿恩免费建网站 服务器特价
锦尚中国源码论坛
百度站长平台 精确提升SEO
旅游网解决方案 大型旅游门户
大型装修门户助您抢占商机
天翼云主机 四川资源池开启微信营销项目诚招代理【稳定】ios苹果签名 网站封装
安乐业房产网全新来袭
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
查看: 815|回复: 0

[CSS/Html] 移动端专用的meta标签设置大全 跟大网站学习建立优秀的meta标签

[复制链接]

987

主题

1248

帖子

736万

金币

超级版主

Rank: 8Rank: 8

积分
14725885
发表于 2018-11-1 12:41:34 | 显示全部楼层 |阅读模式

学习前言
在之前学习前端中,对meta标签的了解仅仅只是这一句。
  1. <meta charset="UTF-8">
复制代码

但是打开任意的网站,其head标签内都有一列的meta标签。比如我们脚本之家网站,但是自己却很不熟悉,于是把meta标签加入了学习计划的最前方。

  1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>
复制代码

这个用的最多,width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。

下面还真用得少devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips

fit-to-screen网站自适应屏幕
如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放
如果content的值大于screen width;fit-to-screen将开启

苹果浏览器相关

  1. <meta name=”viewport” content=”minimal-ui”>
复制代码

在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

  1. <meta name=”apple-mobile-web-app-capable” content=”yes”>
复制代码

是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏

  1. <meta name=”apple-touch-fullscreen” content=”yes”>
复制代码

开启对web app程序的支持

  1. <meta name=”format-detection” content=”telephone=no”>
  2. <meta name=”format-detection” content=”email=no” />
复制代码

iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!
telephone=no就忽略页面中的数字识别为电话号码
telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启!

  1. <meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
  2. <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
  3. <meta name=””apple-mobile-web-app-status-bar-style” content=”black-translucent” />
复制代码

控制状态栏显示样式  default(白色)black(黑色) black-translucent(灰色半透明)

link标签apple-touch-icon
如果 apple-mobile-web-app-capable 设置为 yes 了,那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。
而通过设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。
以下是针对ox不同设备,选择一个最优icon。默认iphone的大小为60px,ipad为76px,retina屏乘以2倍。

  1. <link rel=”apple-touch-icon” href=”touch-icon-iphone.png”>
  2. <link rel=”apple-touch-icon” sizes=”76×76″ href=”touch-icon-ipad.png”>
  3. <link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”>
  4. <link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”>
复制代码

ios7以前系统默认会对图标添加特效(圆角及高光),如果不希望系统添加特效,则可以用 apple-touch-icon-precomposed.png 代替 apple-touch-icon.png

图标使用的优先级如下:
如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标,会自动搜索网站根目录下以 apple-touch-icon 为前缀的png图标。
注:ios7不再为icon添加特效,ios7以前则默认为icon添加特效,除非icon有关键字 -precomposed.png 为后缀。

IE浏览器

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  避免IE使用兼容模式
<meta name=”MobileOptimized” content=”320″>  微软为IE Mobile版设置的定义宽度标记
浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name=”HandheldFriendly” content=”true” /> :是否对手持设备友好,只有true或者false

UC浏览器

<meta name=”screen-orientation” content=”portrait”>  强制竖屏
<meta name=”full-screen” content=”yes”>  强制全屏
<meta name=”browsermode” content=”application”>  应用模式

QQ浏览器
<meta name=”x5-orientation” content=”portrait”>  强制竖屏
<meta name=”x5-fullscreen” content=”true”>  强制全屏
<meta name=”x5-page-mode” content=”app”>  应用模式

360浏览器

<meta name=”renderer” content=”webkit”>  开启急速模式
meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

手机端特有的有哪些?

  1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  2. <meta content="yes" name="apple-mobile-web-app-capable">
  3. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  4. <meta content="telephone=no" name="format-detection">
复制代码

第一个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(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。

下面看一下各大厂移动端页面 meta
一、天猫

  1. <meta name="aplus-terminal" content="1"/>
  2. <meta name="apple-mobile-web-app-title" content="TMALL"/>
  3. <meta name="apple-mobile-web-app-capable" content="yes"/>
  4. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
  5. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
  6. <meta name="format-detection" content="telephone=no, address=no">
复制代码

二、淘宝

  1. <meta charset="utf-8">

  2. <meta content="yes" name="apple-mobile-web-app-capable"/>

  3. <meta content="yes" name="apple-touch-fullscreen"/>

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

  5. <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

  6. <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
复制代码

三、京东

  1. <title> 京东 - 手机版 </title>

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

  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK">

  4. <meta name="apple-mobile-web-app-capable" content="yes">

  5. <meta name="apple-mobile-web-app-status-bar-style" content="black">

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

  7. <meta http-equiv="Expires" content="-1">

  8. <meta http-equiv="Cache-Control" content="no-cache">

  9. <meta http-equiv="Pragma" content="no-cache">

  10. <meta name="Keywords" content="">

  11. <meta name="description" content="">
复制代码

四、网易

  1. <title>手机网易网</title>
  2. <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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

  4. <meta name="keywords" content="" />

  5. <meta name="description" content="" />
复制代码

五、百度

  1. <meta name="referrer" content="always">

  2. <meta charset="utf-8">

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

  4. <meta name="format-detection" content="telephone=no">
复制代码

六、搜狐

  1. <title>手机搜狐网</title>
  2.                              
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  4. <meta http-equiv="Cache-Control" content="no-cache" />

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

  6. <meta name="MobileOptimized" content="320"/>

  7. <meta name="description" content="" />

  8. <meta name="keywords" content="" />
复制代码

模拟手机端网页

  1. <meta name=”viewport” content=”width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
复制代码

viewport ->视窗(展示区域)
width=device-width设备宽度

视口

  1. <metaname = ‘viewport’content = “width=320”>

  2. <metaname = ‘viewport’content = “width=device-width”>
复制代码

user-scalable=no/0是否允许缩放
initial-scale=1.0初始值
maximum-scale=1.0
minimum-scale=1.0

  1. <meta name=”viewport” content=”width=device-width, user-scalable=no”>
复制代码

user-scalable=no/0禁止用户缩放页面

  1. <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0″>
复制代码

initial-scale=1.0初始化页面缩放比例

  1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
复制代码

maximum-scale=1.0最大缩放比例(为了个别手机华为Meta8)

苹果设备专有meta:

  1. <!—允许网页以app形式运行(允许添加到主屏幕)—>

  2. <meta name=”apple-mobile-web-app-capable” content=”yes”>

  3. <!—状态栏颜色—>

  4. <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
复制代码

京东meta:

  1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

  2. <meta name=”apple-mobile-web-app-capable” content=”yes”>

  3. <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

  4. <!—禁止之别电话号码和邮箱—>

  5. <meta name=”format-detection” content=”telephone=no,email=no”>
复制代码

淘宝meta:

  1. <meta content=”yes” name=”apple-mobile-web-app-capable”>

  2. <!–点击页面区域全屏展示—>

  3. <meta content=”yes” name=”apple-touch-fullscreen”/>

  4. <meta content=”telephone=no,email=no” name=”format-detection”/>

  5. <!–应用信息,保留系统历史记录,运动效果–>

  6. <meta name=”App-Config” content=”fullscreen=yes,useHistoryState=yes,transition=yes”/>
复制代码

其他meta:

  1. <!–强制让360浏览器用chrome内核渲染页面–>

  2. <meta name=”renderer” content=”webkit”>

  3. <!–尽量用IE最新的模式渲染–>

  4. <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  5. <!–针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓–>

  6. <meta name=”HandheldFriendly” content=”true”>

  7. <!–微软的老式浏览器–>

  8. <meta name=”MobileOptimized” content=”320″>

  9. <!– uc强制竖屏–>

  10. <meta name=”screen-orientation” content=”portrait”>

  11. <!– QQ强制竖屏–>

  12. <meta name=”x5-orientation” content=”portrait”>

  13. <!– UC强制全屏–>

  14. <meta name=”full-screen” content=”yes”>

  15. <!– QQ强制全屏–>

  16. <meta name=”x5-fullscreen” content=”true”>

  17. <!– UC应用模式–>

  18. <meta name=”browsermode” content=”application”>

  19. <!– QQ应用模式–>

  20. <meta name=”x5-page-mode” content=”app”>
复制代码


全文总结
以上就是这篇学习文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对锦尚中国的支持。





锦尚数据隆重推出免备案国内BGP多线主机,相信欧阳没错滴   双线至强云主机火热订购 http://yun.52jscn.com/shuanxian.html
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码

锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 )

GMT+8, 2019-2-17 22:41 , Processed in 0.129192 second(s), 26 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 锦尚爱心