菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
304
0

html中的meta配置

原创
05/13 14:22
阅读数 80502

1、移动端viewport标签

  • width: 设置layout viewport 的宽度,为一个正整数,或字符串"device-width" 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素),即让html的宽等于设备的宽(例如设备是iphone6 宽是375 pt),那么html的宽也是等于375px,
    如果设计图的宽是750px。那么在使用的时候像素要除于2。把图片转换为375像素之后再量取即可。
  • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数,是页面大小的一个乘数。如果值为1.0,那么web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。
  • minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数
  • maximum-scale: 允许用户的最大缩放值,为一个数字,可以带小数
  • user-scalable: 是否允许用户进行缩放,值为 “no” 或 “yes”, no 代表不允许,yes 代表允许
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">">

2、是否启用 WebApp 全屏模式(更接近原生APP的风格)

content有两个值”yes”和”no”,默认no就是显示苹果工具栏和菜单栏

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

3、设置状态栏的背景颜色

设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效,默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

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

4、告诉设备忽略将页面中的数字识别为电话号码(默认会被识别为电话号码,点击后就出现拨号状态)(iOS)

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

5、关闭移动端邮箱识别(Android)

    <meta name="format-detection" content="email=no">

6、搜索引擎优化,页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字

    <meta name="keywords" content="">

7、搜索引擎优化,页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

    <meta name="description" content="">

8、禁止缓存

禁止浏览器从本地计算机的缓存中访问页面内容,这样设定,访问者将无法脱机浏览。

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

9、指定网页兼容性模式

多核浏览器可以让浏览器使用最新引擎渲染

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

发表评论

0/200
304 点赞
0 评论
收藏
为你推荐 换一批