移动端声明及meta标签设置

news/2024/7/8 8:05:05

移动端meta标签设置

1.设置当前html文件的字符编码

<meta charset="UTF-8">

2设置浏览器的兼容模式（让IE使用最新的浏览器渲染）

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

3.视口（快捷键：meta:vp）

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

作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备那么大展示；

视口的宽度可以通过meta标签设置；

此属性为移动端页面视口设置；

width：视口的宽度，width=device-width：宽度是设备的宽度

initial-scale：初始化缩放，- initial-scale=1.0：不缩放

user-scalable：是否允许用户自行缩放，取值0或1，yes或no

minimum-scale：最小缩放

maximum-scale：最大缩放

一般设置了不允许缩放，就没必要设置最大最小缩放了。

4.Cache-Control头域

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下,

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存

must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。

5.是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

<meta http-equiv="Pragma" content="no-cache"/>

6.禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。

这个标签的默认值是telephone=yes。

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

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

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

当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

8.控制状态栏显示样式

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

content设置状态栏颜色

9.条件注释

  • html5shiv让浏览器可以识别html5的新标签；

  • respond让低版本浏览器可以使用CSS3的媒体查询。

控制显示区域各种属性：

<metacontent="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"name="viewport">

  width                      - viewport的宽度

height – viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

IOS中Safari允许全屏浏览：

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

IOS中Safari顶端状态条样式：

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

忽略将数字变为电话号码：

<metacontent="telephone=no"name="format-detection">

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

IOS中Safari设置保存到桌面图标：

这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px

<linkrel="apple-touch-icon"href="custom_icon.png">

// 手势事件

touchstart //当手指接触屏幕时触发

touchmove //当已经接触屏幕的手指开始移动后触发

touchend //当手指离开屏幕时触发

touchcancel

// 触摸事件

gesturestart //当两个手指接触屏幕时触发

gesturechange //当两个手指接触屏幕后开始移动时触发

gestureend

// 屏幕旋转事件

onorientationchange

// 检测触摸屏幕的手指何时改变方向

orientationchange

// touch事件支持的相关属性

touches

targetTouches

changedTouches

clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)

clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)

screenX　　　 // Relative to the screen

screenY 　　 // Relative to the screen

pageX　　 　　// Relative to the full page (includes scrolling)

pageY　　　　 // Relative to the full page (includes scrolling)

target　　　　 // Node the touch event originated from

identifier　　 // An identifying number, unique to each touch event

  1. 屏幕旋转事件：onorientationchange

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：

// 判断屏幕是否旋转

functionorientationChange() {

switch(window.orientation) {

　　case0: 

        alert("肖像模式 0,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

        break;

　　case-90: 

        alert("左旋 -90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

        break;

　　case90:   

        alert("右旋 90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

        break;

　　case180:   

    　　alert("风景模式 180,screen-width: "+ screen.width + "; screen-height:"+ screen.height);

    　　break;

};<br>};

// 添加事件监听

addEventListener('load', function(){

orientationChange();

window.onorientationchange = orientationChange;

});

  1. 隐藏地址栏 & 处理事件的时候，防止滚动条出现：

// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现

addEventListener('load', function(){

    setTimeout(function(){ window.scrollTo(0, 1); }, 100);

});

  1. 双手指滑动事件：

// 双手指滑动事件

addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},

 false// 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)

);

functiontwoFingerScroll(ev) {

vardelta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作

returntrue;

};

  1. 判断是否为iPhone：

// 判断是否为 iPhone ：

functionisAppleMobile() {

return(navigator.platform.indexOf('iPad') != -1);

};

  1. localStorage:

例子 ：（注意数据名称 n 要用引号引起来）

varv = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ，则将其读出 ，赋予变量 v 。

localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据

localStorage.removeItem('n'); // 删除名称为 n 的数据

  1. 使用特殊链接：

如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

<ahref="tel:12345654321">打电话给我</a>

<ahref="sms:12345654321">发短信</a>

或用于单元格：

<tdοnclick="location.href='tel:122'">

  1. 自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

<inputtype="text"autocapitalize="off"autocorrect="off"/>

声明viewport视口

viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。

width 正整数或device-width 定义视口的宽度，单位为像素

height 正整数或device-height 定义视口的高度，单位为像素

initial-scale [0.0-10.0] 定义初始缩放值

minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置

maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置

user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes

忽略数字自动识别为电话号码

在IOS Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。比如：7位数字，形如：1234567；带括号及加号的数字，形如：(+86)123456789；双连接线的数字，形如：00-00-00111；11位数字，形如：13800138000可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。

关闭电话自动识别：开启拨打电话/发送短信功能立即拨打电话立即发送短信如果同样也需要禁止自动识别邮箱，可以在原来的基础上增加“email=no”。开启自动识别邮箱给我们发邮件

把页面增加到桌面主屏幕

在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面。(只对IOS有效)

当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。

WebApp全屏模式

设置状态栏颜色

只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的，即白色，网页从状态栏以下开始显示) | black(状态栏将为黑色，网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上)。

添加到主屏后的图标

IOS系统中对ICON有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。rel="apple-touch-icon-precomposed"是设定按照设计稿原图的图标显示，rel="apple-touch-icon"是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

添加到主屏后的标题

QQ浏览器(X5内核)独有的META

//->设置屏幕方向 //->设置全屏

UC浏览器独有的META

//->设置屏幕方向 //->设置全屏 //->缩放不出现滚动条 //->夜间模式

强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个<img src="" show="force"/>

使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。



作者：兜兜里冒糖糖
链接：https://www.jianshu.com/p/0298c859bb0d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


http://lihuaxi.xjx100.cn/news/1340714.html

相关文章

MySQL数据库——索引练习

MySQL数据库——索引练习

一、练习题目 1、建立一个utf8编码的数据库test1 2、建立商品表goods和栏目表category&#xff08;要求&#xff1a;按如下表结构创建表&#xff0c;并且存储引擎engine myisam 字符集charset utf8&#xff09; 3、删除 goods 表中的 goods_desc 字段及货号字段,并增加 click…
阅读更多...
找工作前，是否要去培训班进行学习呢？

找工作前，是否要去培训班进行学习呢？

在学习IT技术的过程中&#xff0c;你是否也被安利过各种五花八门的技术培训班&#xff1f;这些培训班都是怎样向你宣传的&#xff0c;你又对此抱有着怎样的态度呢&#xff1f;在培训班里学技术&#xff0c;真的有用吗&#xff1f; 一、引入话题 一年又一年的毕业季有来临了&am…
阅读更多...
Vector - CANoe - CAPL文件加密

Vector - CANoe - CAPL文件加密

目录 为什么会有CAPL文件加密需求？ 加密文件介绍 “*.can”和“*.cin” 文件创建 <
阅读更多...
微软亚洲研究院推出AI编译器界“工业重金属四部曲”

微软亚洲研究院推出AI编译器界“工业重金属四部曲”

编者按&#xff1a;编译器在传统计算科学中一直是一个重要的研究课题。在人工智能技术快速发展和广泛应用的今天&#xff0c;人工智能模型需要部署在多样化的计算机硬件架构上。同时&#xff0c;训练和部署大型人工智能模型时又对硬件性能有着更高的要求&#xff0c;有时还需根…
阅读更多...
2022 Robocom CAIP省赛 第五题 树与二分图

2022 Robocom CAIP省赛 第五题 树与二分图

原题链接&#xff1a; PTA | 程序设计类实验辅助教学平台 题面&#xff1a; 设 G(V,E) 是一个无向图&#xff0c;如果顶点集合 V 可分割为两个互不相交的子集 (A,B)&#xff0c;并且每条边 (i,j)∈E 的两个端点 i 和 j 分别属于这两个不同的顶点子集&#xff0c;则称图 G 为一…
阅读更多...
S32K系列MCU介绍和资料搜集

S32K系列MCU介绍和资料搜集

1. S32K系列微控制器概述 S32K系列微控制器&#xff0c;是NXP推出的专门面向汽车电子和工业应用场合的微控制器。基于ArmCortex-M系列的可扩展、低功耗微控制器&#xff0c;获得了AEC-Q100认证&#xff0c;具有高级功能安全、信息安全和软件支持&#xff0c;适用于工业和汽车A…
阅读更多...
图像处理之高斯滤波

图像处理之高斯滤波

文章目录 高斯函数1.一维高斯函数2. 二维高斯函数 高斯滤波 高斯函数 高斯函数广泛应用于统计学领域&#xff0c;用于表述正态分布&#xff0c;在信号处理领域&#xff0c;用于定义高斯滤波器&#xff0c;在图像处理领域&#xff0c;二维高斯核函数常用于高斯模糊Gaussian Blu…
阅读更多...
基于SpringBoot+vue的外卖点餐系统设计与实现

基于SpringBoot+vue的外卖点餐系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…
阅读更多...
最新文章

Copyright @ 2022~2023