移动端开发(初级入门)
Posted 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,
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
Public指示响应可被任何缓存区缓存
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息
③.<meta http-equiv="Expires" content="0"/>
设定网页的到期时间
④.<meta http-equiv="Pragma" content="no-cache"/>
是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
⑤.<meta http-equiv="Refresh" content="2;URL=http://www.NET.cn/"/>
自动刷新并指向新页面。
⑥.<meta http-equiv="Pics-label" content=""/>
Pics-label(网页等级评定)
⑦.<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
关键字,给搜索引擎用的
至于其它的js.css大家就自己引入即可。
以上是关于移动端开发(初级入门)的主要内容,如果未能解决你的问题,请参考以下文章