一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   
width - viewport的宽度 height - viewport的高度   
initial-scale - 初始的缩放比例  
minimum-scale - 允许用户缩放到的最小比例   
maximum-scale - 允许用户缩放到的最大比例  
user-scalable - 用户是否可以手动缩放

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

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是:

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

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:

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

三、<meta name="apple-mobile-web-app-capable" content="yes" />

说明:网站开启对web app程序的支持。

四、<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)。

!!!!苹果web app其他设置:

当然,配合web app的icon 和 启动界面需要额外的两端代码进行设定,如下所示:

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

说明:这个link就是设置web app的放置主屏幕上icon文件路径

使用:

  • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
  • 图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)
  • <link rel="apple-touch-startup-image" href="milanoo_startup.png" />
  • 说明:这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。

    使用:

    • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
    • 官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。

    五、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
    这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />//将不识别邮箱
    告诉设备忽略将页面中的数字识别为电话号码
    iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

    • 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
    • 官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。

移动端开发的meta标签作用的更多相关文章

  1. [转]移动web开发中meta标签作用

    今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...

  2. HTML中meta标签作用及属性总结

    在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...

  3. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  4. html meta标签作用

    1.概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务. 必要属性: conten ...

  5. 关于移动端开发,vedio标签层级高遮挡蒙版的解决方案

    问题描述: 使用famework7框架搭建了一个界面,然后再界面中需要使用蒙版效果,在PC端,ios测试没有问题,在Andriod播放视屏再点击显示蒙版的效果师,视频会遮盖蒙版.修改定位,z-inde ...

  6. Skyline WEB端开发5——添加标签后移动

    针对于标签或者模型,在skyline上可以进行移动.可以让一个模型可以像无人机似的飞行,或者描述从一个点到另一个点的飞行轨迹. 话不多说,直接上干货. 第一步 添加标签 参考网址:https://ww ...

  7. 鲜为人知的一些meta标签作用

    来自UC Scrat-team http://scrat-team.github.io/ <meta name="viewport" content="width= ...

  8. 写移动端必备的meta标签

    <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-C ...

  9. 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》

    <meta name="screen-orientation" content="portrait"> <meta name="fu ...

随机推荐

  1. poj 1679 http://poj.org/problem?id=1679

    http://poj.org/problem?id=1679 The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submis ...

  2. jquery easyui将form表单元素的值序列化成对象

    function serializeObject(form){ var o={}; $.each(form.serializeArray(),function(index){ if(o[this['n ...

  3. Chapter 8. Classes

    8.1. Class Declarations 8.1.1. Class Modifiers 8.1.1.1. abstract Classes 8.1.1.2. final Classes 8.1. ...

  4. C#中反射的使用(How to use reflect in CSharp)(3)Emit的使用

    Emit意在动态构建一个可以执行(当然也就可以反射)或者只可以反射的动态库. 个人认为在不得不使用反射的情况下,使用Emit会使得效率提升空间很大.亦或者动态插件模式的软件设计中会用到. 依然2%的废 ...

  5. 表单校验之datatype

    凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...

  6. Unity3D-Baked Lightmapping 示例学习

    首先,看一下摄像机的Rendering Paths http://game.ceeger.com/Manual/RenderingPaths.html 可以看出,对于灯光的渲染质量 Deferred ...

  7. Date、String、Calendar、Timestamp类型之间的转化

    1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...

  8. Selenium 中使用方法小结

    --> 文本框 中填写 文本信息 basePage.getTXTPortfolio().sendKeys("文本信息"); --> 点击某个 文本框/下拉列表 中的 指 ...

  9. esxi 5.1 由于断电错误无法启动 报错 bank5 invalid configuration

    由于着急,处理过程中也没有截图,这里简单的描写叙述下整个过程吧. IBM pcserver x3850 可能是机器太热的原因,中午无故掉电,导致esxi无法正常启动 启动时报错 bank5 inval ...

  10. delphi 设置超链接

     的属性 的事件 的方法 //1设置链接类型//2获取样式 链接和提示信息 //title是提示信息//HTTPS https://<a href="https://www.baidu ...