`
zccst
  • 浏览: 3315626 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[移动端]专用的meta

阅读更多
作者:zccst


<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将开启



苹果浏览器相关
2015-07-08
<meta name="viewport" content="minimal-ui">
在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。


<meta name="apple-mobile-web-app-capable" content="yes">
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏

<meta name="apple-touch-fullscreen" content="yes">
开启对web app程序的支持

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

<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<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倍。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" 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适配方案.js

    网易严选移动端meta适配方案,浏览器窗口改变字体等跟着变动 网易严选移动端meta适配方案,浏览器窗口改变字体等跟着变动 网易严选移动端meta适配方案,浏览器窗口改变字体等跟着变动

    移动端html5 meta标签的神奇功效

    在移动端HTML5开发中,Meta标签扮演着至关重要的角色,它们可以帮助优化网页在移动设备上的显示效果,提高用户体验,同时也有利于搜索引擎优化(SEO)。本文将深入探讨移动平台的Meta标签,尤其是viewport、format-...

    vue移动端的左右滑动事件详解

    本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;&lt;/title&gt; [removed][removed] &lt;...

    META通用解锁工具MTK手机哦专用

    标题中的“META通用解锁工具MTK手机哦专用”指的是针对采用MediaTek(MTK)芯片的智能手机设计的一款解锁工具,其主要功能是帮助用户进行芯片级别的调试和解锁操作。MediaTek是一家知名的半导体公司,其生产的芯片...

    移动端适配方案.doc

    * 可以通过 meta 标签来设置视口大小,例如 `&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;`。 5. vw 单位 * 不同设备的视口大小和像素比不同,同样的 vw 单位在不同的设备下意义是不...

    移动端开发最佳实践

    ### 移动端开发最佳实践概述 在当前数字化时代,移动端应用开发已成为企业与个人连接用户、提升用户体验的关键环节。本文档旨在分享一系列移动端APP开发的最佳实践,涵盖从设计到编码的全过程,帮助开发者构建高...

    手淘解决移动端适配问题(flexible)

    在HTML的head标签中,开发者通常会添加meta标签来定义viewport,例如`&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;`。这使得网页的宽度等于设备的...

    zepto手机移动端拼音字母城市选择代码.zip

    这是一款手机端触屏滑动按拼音字母查询的多个城市选择器网页特效,zepto手机移动端拼音字母城市选择代码。 &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt; &lt;meta name=...

    移动端网页版强制横屏实例

    在移动端网页开发中,有时我们需要实现特定场景下的横屏显示,比如游戏、视频播放或一些特殊应用界面。本文将详细讲解如何实现移动端网页版的强制横屏功能,并确保即使手机设置为自动旋转,也能适应并保持横屏状态。...

    移动端web学习笔记.doc

    首先,移动端标准设置涉及到HTML的`&lt;meta&gt;`标签,尤其是`viewport`属性。这个标签告诉浏览器如何调整网页的宽度和缩放以适应不同的移动设备。例如: ```html &lt;meta name="viewport" content="width=device-width, ...

    D2-淘宝移动端Web开发实践

    ### D2-淘宝移动端Web开发实践 #### 移动端Web开发概述 随着移动互联网的兴起,越来越多的用户开始依赖手机、平板等移动设备来访问网络。为了更好地满足这一趋势,淘宝团队分享了一系列关于移动端Web开发的最佳实践...

    jquery实现移动端点击图片查看大图特效

    多用于移动端,因为移动端屏幕小,可能需要查看大图。 具体实现代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta charset="utf-8"/&gt; &lt;head runat="server"&gt; &lt;title&gt;JQuery点击图片查看大图by starof...

    诊断性meta分析手把教你做临床Meta分析——诊断试验性Meta-Disc分析.doc

    诊断性meta分析手把教你做临床Meta分析——诊断试验性Meta-Disc分析 诊断性meta分析是Meta分析的一个重要局部,准确诊断性Meta分析是临床治疗的根底。本篇文章将向大家推荐一款专用于诊断性试验的免费Meta分析软件...

    jQuery手机移动端日期时间选择代码

    《jQuery手机移动端日期时间选择代码详解》 在现代网页开发中,用户界面的交互性和便捷性至关重要,尤其是在手机移动端。日期时间选择器是常见的UI组件之一,它允许用户方便地选取日期和时间,广泛应用于预约系统、...

    sp_meta工具

    **SP_META工具详解** 在移动设备的开发和调试过程中,Meta模式扮演着至关重要的角色。MTK(MediaTek)作为全球知名的芯片制造商,为开发者提供了一款名为SP_META的工具,便于进入Meta模式进行二次开发。本文将深入...

    Nuxt页面自定义meta标签和asyncData异步请求

    一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是:hid属性是页面的唯一标识 若想...

Global site tag (gtag.js) - Google Analytics