我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!
先搞清楚两个概念,移动端web开发,web app开发
1、 移动web开发(pc端的页面用手机浏览器打开)
这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性
2、 web app开发(web应用程序)
特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).
一、meta标签
html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport (可视区域)
device-width - 设备的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
其次是一些辅助优化功能,常用的有如下meta标签:
下面延伸一下标签的作用
meta标签是元素可提供相关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。
meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。
name属性
主要有以下几种参数:
(1)Keywords(关键字)
说明:keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量
举例:
="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">
(2)description(网站内容描述)
说明:description用来告诉搜索引擎你的网站主要内容。
网站内容描述(description)的设计要点:
①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);
②通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;
③网页描述中含有有效关键词;
④网页描述内容与网页标题内容,主题内容有高度相关性;
⑤网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。
举例:
(3)robots(机器人向导)
说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例:
(4)author(作者)
说明:标注网页的作者
http-equiv属性
相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值
(1)content-Type(显示字符集的设定)
说明:设定页面使用的字符集。
用法:
(2)content-Language(当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言)
用法:
(3)Expires(期限)
说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
用法:
注意:必须使用GMT的时间格式。
(4)Pragma(cache模式)
说明:禁止浏览器从本地计算机的缓存中访问页面内容。
用法:
注意:这样设定,访问者将无法脱机浏览。
(5)Refresh(刷新)
说明:自动刷新并转到新页面。
用法:;(注意后面的分号,分别在秒数的前面和网址的后面,URL可为空)
注意:其中的2是指停留2秒钟后自动刷新到URL网址。
(6)Set-Cookie(cookie设定)
说明:如果网页过期,那么存盘的cookie将被删除。
用法:
注意:必须使用GMT的时间格式。
(7)Window-target(显示窗口的设定)
说明:强制页面在当前窗口以独立页面显示。
用法:
注意:用来防止别人在框架里调用自己的页面。