zoukankan      html  css  js  c++  java
  • 移动端页面需要了解的知识

    1,<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame,作用是在使用ie浏览器解析页面时,有时候会使用IE7兼容模式解析页面,设置这个是强制使用高版本IE解析页面。参考 http://www.tuicool.com/articles/ra6Fjuj


    2,<meta name="viewport" content="width=device-width, initial-scale=1.0">
    viewport 翻译:视口,这里指我们的设备大小。在设备上设置原始大小显示和是否缩放申明
    width=device-width :表示宽度是设备屏幕的宽度
    initial-scale=1.0:表示初始的缩放比例
    minimum-scale=0.5:表示最小的缩放比例
    maximum-scale=2.0:表示最大的缩放比例
    user-scalable=yes:表示用户是否可以手动调整缩放比例

    其实还可以通过viewport 把自己冒充成更宽的屏幕
    参考:移动前端开发viewport的深入理解 http://www.cnblogs.com/2050/p/3877280.html


    3,<meta name="format-detection"content="telephone=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就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!
    参考:meta标签中的format-detection属性及含义 http://blog.sina.com.cn/s/blog_51048da70101cgea.html

    4,<meta name="apple-mobile-web-app-capable" content="yes" />
    这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。


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

    <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” />

    建议用苹果手机测试下
     作用是控制状态栏显示样式
    status-bar-style:black

    status-bar-style:black-translucent

    以上两个都可参考: http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

    6,<link rel="dns-prefetch" href="//网址">
    DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。
    在某些现代浏览器 ( Google Chrome, Firefox 3.5+ ) 中, 已经能够支持DNS的预取了, 怎么个预取呢? 就是在浏览器加载网页时, 对网页中的<link>或者<a>的href属性中的域名进行后台的预解析(上文中的 1- 5步), 并且将解析结果缓存在浏览器端, 当用户在真正点击链接时, 省去在当下的DNS解析消耗, 把这个消耗过程转嫁到用户无法感知的浏览过程中去.
    参考:

    什么是DNS Prefetch? http://www.liqwei.com/program/other/2014/909.shtml
    网站优化应重视DNS预获取 http://dbanotes.net/web/dns_prefetching.html
    DNS优化的原理和方法 http://www.blueidea.com/tech/site/2011/8697.asp
    浏览器DNS 预取读技术的危害 (禁用DNS 预读取能节省每月100亿的DNS查询) http://www.cnblogs.com/dodohua/archive/2011/03/10/1980110.html

    7,<link rel="apple-touch-icon" href="/xxx_icon.png"/>
    现今移动设备越来越多,苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问,个人理解就是添加手机桌面快捷方式
    参考:

    关于Apple设备私有的apple-touch-icon属性详解 http://blog.csdn.net/freshlover/article/details/9310437
    WebApp之 apple-touch-icon http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html

    如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

    如果您想转载本博客,请注明出处

    如果您对本文有意见或者建议,欢迎留言

    感谢您的阅读,请关注我的后续博客

  • 相关阅读:
    iOS 图像渲染原理
    胶水语言
    关于事件处理
    redux有价值的文档
    redux沉思录
    详解JavaScript中的Object对象
    js 类型系统的核心:元类型、原型链与内省机制
    范畴、类型、复合、函数式编程
    js的类型系统--js基于原型的基石是所有对象最终都能够类型自证
    windows下查看dns缓存和刷新缓存
  • 原文地址:https://www.cnblogs.com/geek12/p/4385026.html
Copyright © 2011-2022 走看看