博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端-移动端h5常用<meta>属性
阅读量:5140 次
发布时间:2019-06-13

本文共 1999 字,大约阅读时间需要 6 分钟。

1.常用属性

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

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

  1. ‘viewport’ 
    设置显示方式,一般适配移动设备用来避免缩放和影响体验的滚动条 
    width=device-width:宽度为设备宽度 
    initial-scale: 初始的缩放比例 (范围从>0到 10 ) 
    minimum-scale: 允许用户缩放到的最小比例 
    maximum-scale: 允许用户缩放到的最大比例 
    user-scalable: 用户是否可以手动缩放
  2. ‘format-detection’ 
    忽略页面对手机号、email的识别 
    telephone:yes|no 
    email:yes|no

2.Safari浏览器私有meta属性

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

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

<meta name="apple-mobile-web-app-title" content="APP name">

  1. ‘apple-mobile-web-app-capable’ 
    隐藏浏览器的地址栏和toolbar,页面显示为全屏,不加此meta则默认显示地址栏和toolbar 
    content:yes|no
  2. ‘apple-mobile-web-app-status-bar-style’ 
    content:default|black| black-translucent,即白色、黑色、灰色半透明
  3. ‘apple-mobile-web-app-title’ 
    添加到主屏后的标题

3.UC浏览器私有meta属性

<meta name="screen-orientation" content="landscape">

<meta name="full-screen" content="yes">

<meta name="browsermode" content="application">

<meta name="layoutmode" content="fitscreen">

<meta name="nightmode" content="disable">

<meta name="imagemode" content="force">

  1. ‘screen-orientation’屏幕方向 
    强制页面横屏或竖屏显示 
    content:landscape|portrait
  2. ‘full-screen’全屏 
    进入全屏后,页面隐藏菜单栏, 生成一个悬浮标, 点击悬浮标可显示菜单栏
  3. ‘browsermode’应用模式 
    应用模式是为方便 web 应用及游戏开发者设置的综合开关,通过 meta 标签进行指示打开,当进入应用模式时,长按菜单、默认手势、夜间模式失效
  4. ‘layoutmode’排版模式 
    UC 浏览器供适屏模式及标准模式,其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快。而标准模式则能按照标准规范对页面进行排版及渲染。 
    content:fitscreen|standard
  5. ‘nightmode’禁用夜间模式 
    禁止页面使用 UC 浏览器自定义的夜间模式
  6. ‘imagemode’强制图片显示 
    为了节省流量及加快速度,通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

4.QQ浏览器私有meta属性

<meta name="x5-orientation" content="landscape">

<meta name="x5-fullscreen" content="true">

<meta name="x5-page-mode" content="default">

  1. ‘x5-orientation’横竖屏控制 
    强制横/竖屏以及跟随浏览器设置【默认】 
    content:landscape|portrait|auto
  2. ‘x5-fullscreen’全屏控制 
    强制全屏以及跟随浏览器设置【默认】 
    content:true|auto
  3. ‘x5-page-mode’ 页面模式 
    普通浏览模式【默认】以及网页应用模式(定制工具栏,全屏显示) 
    content:default|app

 

转载于:https://www.cnblogs.com/vsmart/p/8628479.html

你可能感兴趣的文章
day29 jq
查看>>
TC 配置插件
查看>>
关于异步reset
查看>>
索引优先队列的工作原理与简易实现
查看>>
SPOJ - DISUBSTR Distinct Substrings (后缀数组)
查看>>
并发编程简介
查看>>
TCP的三次握手(建立连接)和四次挥手(关闭连接)
查看>>
第五次作业(最大公约数,最小公倍数)
查看>>
C++两水杯量出所需水量的小算法
查看>>
[面试真题] LeetCode:Same Tree
查看>>
iOS:quartz2D绘图
查看>>
第八周作业
查看>>
约数函数
查看>>
语言基础思维导图
查看>>
mysql自动添加时间的方法
查看>>
使用Python编的猜数字小游戏
查看>>
Java 日期时间
查看>>
UVa 540 Team Queue 【STL】
查看>>
BaseAdapter
查看>>
第一章计算机网络和因特网-day01
查看>>