zoukankan      html  css  js  c++  java
  • 移动端<meta>属性配置讲解(整理)

    meta标签,是head区的辅助标签

    HTML代码如下:      

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    1.<meta charset="utf-8">
    charset,字符集的意思,utf-8为最广泛的编码,致力于把全球额语言纳入统一的编码,广泛应用于网页编码;GB2312是简体中文编码。当网页中出现中文、韩文、日文的时候网页将可能出现乱码,不能正确地被正确编码。

    2.<meta name="viewport" content="width=device-width,initial-scale=1.0,mininum-scale=1.0,user-scalable=no">
    移动设备上的viewport就是设备的屏幕能用来显示网页的那部分区域,移动设备并不像电脑设备那样一个像素对应一个物理像素,css中的像素只是一个抽象的单位,设备上的一个css像素相当于多少个物理像素,也因设备的不同而不同。
    width=device-width
    在meta元素中设置viewport的width等于设备的屏幕的分辨率宽度device-width,
    initial-scale=1.0
    initial-scale:为初始缩放比例,
    mininum-scale:允许用户的最小缩放比例
    maximum-scale:允许用户的最大缩放比例
    user-scalable:是否允许用户手动缩放
    在移动端中为了较好地显示一致一般不允许用户缩放,初始缩放为1.
    具体说明可以看:http://www.cnblogs.com/2050/p/3877280.html
    3.<meta http-equiv="X-UA-Compatible" content="IE=edg,chrome=1">
    实际上X-UA-Compatible是针对IE8推出的一个属性,当时IE8退出,造成了很多的重构问题,所以用这个标签来强制IE8采用低版本模式渲染
    IE=edg,chrome=1表示如果IE装有google chrome frame,那么用安装的组件,如果没有就以IE的最高版本来显示

    4.<meta name="format-detection" content="telephone-no">
    format-detection的意思是格式检测,设备会自动将一串数字加链接样式,当点击这个数字会自动拨号,
    telephone=no就是告诉移动端设备不需要做这个格式检测,
    还有就是email=no,adress=no,邮件和地址不需要识别,因为有可能点击就启动发邮箱和地图的默认软件跳转。
    <meta name="format-detection" content="telephone=no,email=no,adress=no">

    html代码如下: 

    <meta name ="keywords" CONTENT="关键字,keyword">
    <meta name ="description" CONTENT="about,descriotion">
    <meta name ="robots" CONTENT="all,none,index,noindex,follow,nofollow">
    <meta name ="author" CONTENT="author,name.@XX.com">

    <meta http-equiv="Pragma" CONTENT="no-cache"> 
    禁止浏览器从本地机的缓存中调阅页面内容,在测试时可用,避免改代码刷新不成功,还是原来的缓存。

  • 相关阅读:
    《剑指offer》第六十八题(树中两个结点的最低公共祖先)
    《剑指offer》第六十七题(把字符串转换成整数)
    《剑指offer》第六十六题(构建乘积数组)
    《剑指offer》第六十五题(不用加减乘除做加法)
    ECShop 2.7.2版本,数据库表
    织梦在导航栏下拉菜单中调用当前栏目子类的方法
    让dedecms autoindex,itemindex 从0到1开始的办法!
    dedeCMS列表页中如何给前几条文章加单独样式?
    dedecms标签调用大全
    完美解决ecshop与jquery冲突兼容
  • 原文地址:https://www.cnblogs.com/xuanwotianming153/p/7076320.html
Copyright © 2011-2022 走看看