标签在移动端的应用

<meta>标签在移动端的应用

1. x-ua-compatible的使用

1.1 IE黑历史

为对之前开发的网页进行支持,IE6允许网页开发人员选择IE编译和显示网页的方式。
通过设置恰当的<!DOCTYPE>, 开发人员可以设置IE的”Quirks Mode”或者”Standards Mode”。
IE8引入了文件兼容性的概念,使用户能够选择特定的IE版本编译和显示网页。

1.2 IE的文件兼容性模式

  • Emulate IE8 mode, 指示IE使用<!DOCTYPE>指令来决定如何编译内容, Standards Mode使用IE8 Standards Mode, Quirks Mode使用IE5 Quirks Mode

  • Emulate IE7 mode, 指示IE使用<!DOCTYPE>指令来决定如何编译内容, Standards Mode使用IE87 Standards Mode, Quirks Mode使用IE5 Quirks Mode

  • IE5 mode, 编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。

  • IE7 mode, 编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。

  • IE8 mode, 支持CSS2.1, Selectors API并支持部分CSS3的功能

  • Edge mode, 指示IE以目前可用的最高模式显示内容

1.3 使用meta标签指定文件兼容性模式

  • x-ua-compatible头标签没有大小写之分。但是除 title 和其他的meta标签之外,它必须在<header>其他元素前使用

  • IE只会使用第一个x-ua-compatible头

  • 指定IE浏览器文档模式

 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
 <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
 <meta http-equiv="x-ua-compatible" content="IE=9" >
 <meta http-equiv="x-ua-compatible" content="IE=8" >
 <meta http-equiv="x-ua-compatible" content="IE=7" >
 <meta http-equiv="x-ua-compatible" content="IE=edge" >
  • 多个模式的指定
    如果一个特定版本的IE支持所要求的兼容性模式多于一种,将采用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

1.4 使用Google Chrome Frame渲染

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

如果安装了GCF,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

2. meta viewport标签的使用

2.1 meta viewport标签可以使用的属性

meta viewport标签首先是由苹果公司在其safari浏览器中引入的,目的是解决移动设备的viewport问题。后来安卓和各大厂商也纷纷效仿,引入了对meta viewport的支持。
在苹果的规范中,meta viewport标签有6个属性。

  • width 设置layout viewport的宽度, 为一个正整数, 或字符串’device-width’

  • initial-scale 设置页面的初始缩放值, 为一个数字, 可以带小数

  • maximum-scale 设置允许用户的最大缩放值, 为一个数字, 可以带小数

  • minimum-scale 设置允许用户的最小缩放值, 为一个数字, 可以为小数

  • height 设置layout viewport的高度

  • user-scalable 是否允许用户进行缩放, 值为”no”或者”yes”

这些属性可以同时使用,也可以单独使用或者混用, 多个属性同时使用时用逗号隔开
此外,在安卓中还支持target-densitydpi这个私有属性,它表示目标设备的密度等级,作用时决定css中的1px代表多少物理像素(devicePixelRatio)。

  • target-densitydpi 值可以为一个数字或者high-dpi, medium-dpi, low-dpi, device-dpi几个字符串中的一个

target-densitydpi=device-dpi时,css中的1px等于设备物理像素的1px。

2.2 如何将当前的viewport宽度设置为ideal viewport的宽度

  • width设置device-width
    由于meta viewport标签中的width能控制layout viewport的宽度,所以将width设置为device-width能够将viewport宽度设置为ideal viewport的宽度

<meta name="viewport" content="width=device-width">

在ipad和iphone上,无论是横屏还是竖屏,宽度都是竖屏时ideal viewport宽度的值。

  • initial-scale设置为1.0
    缩放是相对于ideal viewport来缩放的,当缩放值为1时,自然得到ideal viewport的宽度

<meta name="viewport" content="initial-scale=1.0">

在windows phone的IE上,无论是横屏还是竖屏,宽度都是竖屏时ideal viewport宽度的值

  • 同时设置width与initial-scale
    在同时设置width与initial-scale时,浏览器会取其中较大的宽度作为其ideal viewport的宽度

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.3 缩放以及initial-scale的默认值

公式

visual viewport宽度 = ideal viewpot宽度 / 当前缩放值 
当前缩放值 = ideal viewport宽度 / visual viewport宽度

在iphone与ipad上,无论给viewport设置的width是多少,如果没有指定默认的缩放值,那么iphone和ipad或自动给计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的

    原文作者:铛铛铛铛
    原文地址: https://segmentfault.com/a/1190000007162530
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞