移动端meta头

    <meta charset="utf-8"><!-- 设置字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
     maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"><!-- 设置缩放  ->
    <meta name="screen-orientation" content="portrait"/><!-- uc强制竖屏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"><!-- 显示苹果工具栏和菜单栏-->
    <meta name="format-detection" content="telephone=no"><!-- 识别为电话号码 -->
    <meta name="full-screen" content="yes"> <!-- UC强制全屏 -->
    <meta name="x5-fullscreen" content="true"><!--  QQ强制全屏  -->

设置字符集

<meta charset="utf-8">

设置缩放
iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,
让网页在加载时便可隐藏顶部的地址栏与底部的导航栏

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

uc强制竖屏

 <meta name="screen-orientation" content="portrait"/>

删除默认的苹果工具栏和菜单栏。

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

需要显示工具栏和菜单栏时,不需要添加,默认值为no,即正常显示。如果content设置为yes,Web应用会以全屏模式运行,可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。
这个标签的默认值是telephone=yes

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

UC强制全屏

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

QQ强制全屏

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

meta viewport 中有6个通用属性:
width 设置layout viewport的宽度 正整数或字符串 ‘width-device’
initial-scale 设置页面的初始缩放值,数字或小数
minimum-scale 允许用户的最小缩放值 数字或小数
maximum-scale 允许用户的最大缩放值 数字或小数
height 设置layout viewport 的高度,这个属性很少用到
user-scaleabel 是否允许用户进行缩放 'no’或‘yes’ 还有2个需要特别注意的两个属性
target-densitydpi 在andriod 4.0一下的设备中,不支持设置viewport的width,android 自带浏览器支持设置 target-densitydpi来达到目的;
miniual-ui ios的safari为meta表天新增的属性,在网页加载是隐藏顶部的地址栏和底部的导航栏

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值