博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端开发(一)(初级入门)
阅读量:6714 次
发布时间:2019-06-25

本文共 1915 字,大约阅读时间需要 6 分钟。

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

、meta

  1、视窗宽度:

  ①.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.自动识别格式:

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

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

  3.对于苹果:

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

  4.http:

eg: 

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

转载于:https://www.cnblogs.com/beyrl-blog/p/7477595.html

你可能感兴趣的文章
必读的Python入门书籍,你都看过吗?(内有福利)
查看>>
linux基础整理0316
查看>>
alibaba.fastjson 乱序问题
查看>>
django 反向关联--blog.entry_set.all()查询
查看>>
网工之路
查看>>
字节序与字节对齐
查看>>
linux 查看发行版本信息
查看>>
数据结构之二叉树遍历
查看>>
Linux rpm 命令参数使用详解[介绍和应用]
查看>>
tr的使用详解
查看>>
CentOS 6.4下PXE+Kickstart无人值守安装操作系统
查看>>
2.5 alias命令
查看>>
arp
查看>>
我的友情链接
查看>>
购物商城图片放大镜效果
查看>>
我的友情链接
查看>>
Maven依赖包
查看>>
去除chrome中input的黄底色
查看>>
Hyper-v之第2代虚拟机
查看>>
spring常用属性配置
查看>>