移动端开发(初级入门)

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.0maximum-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大家就自己引入即可。

以上是关于移动端开发(初级入门)的主要内容,如果未能解决你的问题,请参考以下文章

rem 结合 scss 移动端自适应 初级入门demo

移动Web初级入门

EasyUI初级入门2

Android系统编程入门系列之应用环境及开发环境介绍

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

移动APP设计入门级:真实的前后端原型长啥样?