移动端开发（初级入门）

Posted 2020-10-05 Beyrl.pan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端开发（初级入门）相关的知识，希望对你有一定的参考价值。

上一个项目快上线了，这几天正好bug也少了，组长突然就交给我几张移动端新增板块的psd，让我做移动端的页面。经过各种查阅资料总算做的可以适应各种手机型号的大小屏幕（也是因为这几张psd较简单）。下面就进入正题：

一、meta

　　1、视窗宽度：

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

　　①.width=device-width 是设置视窗宽度为设备视窗宽度，还可以固定宽度，例如： width=640 则是640px的宽度（常见于微信）；

　　②.initial-scale=1.0 ：设置缩放比例为1.0；

　　③.minimum-scale=1.0 和 maximum-scale=1.0 ：最小缩放比例和最大缩放比例；

　　④.user-scalable=no ：禁止用户自由缩放，user-scalable 默认值为 yes 。

　　2.自动识别格式：

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

　　①.content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

　　正常的话，上面这两个就够了，但是还有下面的一些其他的需求和情况：

　　3.对于苹果：

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

　　①.name里面的作用是控制状态栏显示样式，这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

　　4.http:

eg:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

　　http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

　　http-equiv里面可以写很多种：

　　①.<meta http-equiv="content-Type" content="text/html;charset=utf-8" />

　　设定页面使用的字符集。

　　②.<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，