移动端web页面前端开发总结

时间 2020-05-28

标签移动 web 页面前端开发总结栏目无线繁體版

原文原文链接

移动web在当今的发展速度是一日千里，做为移动领域的门外汉，在这段时间经过小码哥不断地接触后，发现移动前端开发这一块应作一个小小的总结来时刻用来温习。说实话，对于移动端前端开发，小码哥至今都看它为一个全新的领域来对待的。么办法嘛，，，不过，幸亏小码哥看到下面一个大概介绍移动端web前端开发的文章，但愿对码友们有所帮助。嘎嘎javascript

1.四大浏览器内核php

1.Trident (IE浏览器) :由于在早期IE占有大量的市场份额，因此之前有不少网页是根据这个Trident的标准来编写的，可是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。css

2.Gecko:( FireFox )优势就是功能强大、丰富，能够支持不少复杂网页效果和浏览器扩展接口，缺点是消耗不少的资源，好比内存。html

3.Webkit: ( Chrome/ Safari / UC )优势就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页没法正确显示。前端

4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操做系统下完美运行。html5

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可以使用Chrome浏览器调试便可。java

2.手机浏览器android

浏览器已经逐渐从传统桌面转向手机端，竞争也愈来愈激烈。目前国内市场主流的手机浏览器：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，因此，大胆地应用html5和css3技术吧。css3

在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，由于HTML5能够实现一些HTML4中没法实现的丰富的WEB应用程序的体验，能够减小开发者不少的工做量，固然了你决定使用HTML5前，必定要对此很是熟悉，要知道HTML5的新标签的做用。好比定义一块内容或文章区域可以使用section标签，定义导航条或选项卡能够直接使用nav标签等等。web

3.终端分辨率

手机分辨率比PC分辨率要庞杂得多，各类分辨率有木有？大小差距那么大有木有？这在必定程度上给页面制做带来了不小的麻烦。因此针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，须要设计和制做完成各类不一样的方法。

1) 市场上主流手机生产商的产品分辨率。通过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据须要花费很多的精力，那是数据分析人员的工做。

2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从必定程度上来讲比第一点来得更加剧要，它决定着项目开发的方向。

4.响应式web开发

在编写CSS时，我不建议前端工程师把容器（无论是外层容器仍是内层）的宽度定死。为达到适配各类手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），由于这样作可让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的显示，你无需再次考虑设备的分辨率。

响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一块儿来制做页面，使得页面不仅在传统桌面，在平板电脑和手机上，各类不一样的分辨率都可以完美显示。而要作到这点，我以为不难，请继续往下：

1) 准备工做：

a) 插件安装：window resize。您能够经过如下连接 https://chrome.google.com/webstore/search-extensions/window%20resize下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和相似于手机视口的大小提示。截图以下：

b) 编辑器安装：subline Text2（支持html5，安装css3扩展失败）、topStyle5（支持css3）。

c) 弄清视口和屏幕的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。好比视口宽度咱们通常用width表示，而屏幕宽度是用device-width来表示。相信作过手机页面的童鞋都常常见过这段代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其中width=device-width就是说把页面宽度设置成和屏幕宽度同样。

d) 响应式设计创意网站收集：http://www.561.cn 。这里有不少响应式Web设计的网站，供您参考和学习。

2) 征途ING：

e) 响应式web设计之媒体查询：

为了减小http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：

@media screen and (max-width:960px){}

大括号内部书写样式。该语句至关于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen表明显示屏，这两个条件都具有了，就调用大括号内的样式。

f) 响应式web设计之流式布局：

流式布局以百分比进行布局。最重要是时刻关注元素的父级层，全部的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，造成平滑的布局变化跳转效果。通常而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。

g) 响应式web设计之液态图片：

要实现液态图片，只需加入以下代码：img{max-width:100%;}

web移动头部书写1

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

</head>

一、首先咱们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到很是重要的做用

这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，而且文档最大的宽度比例是1.0，且不容许用户点击屏幕放大浏览；

meta标签是iphone设备中的safari私有meta标签，它表示：容许全屏模式浏览；

meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

其余注意问题

1.在项目开发过程当中能够会遇到内容排列显示的布局，建议你放弃float，能够直接使用display:block;

2.请保证将每条数据都放在一个a标签中，为什么这样作？由于在触控手机上，为提高用户体验，尽量的保证用户的可点击区域较大。

3.学会使用webkit-box。

咱们说过自适应布局模式，有些同窗可能会问：如何在移动设备上作到彻底自适应呢？很感谢webkit为display属性提供了一个 "webkit-box" 的值，它能够帮助前端工程师作到盒子模型灵活控制。

四、如何去除Android平台中对邮箱地址的识别 看过iOS webapp API的同窗都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，若是你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中

五、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD或者交互设计师可能会要求你：可否让咱们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？答案是能够作到的。咱们能够利用一句简单的javascript代码来实现这个效果

setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才可以正常的工做，并且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

六、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但如今我能够很负责任的告诉你：别想了!在移动版的webkit中作不到！至少Apple webapp API已经说到了：咱们为了让用户在safari中正常的浏览网页，咱们必须保证用户的设备处于任何一个方位时，safari都可以正常的显示网页内容（也就是自适应），因此咱们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出发点是正确的，苹果确实不是通常的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，可是在Android平台，确实也是阻止不了的。

七、如何检测用户是经过主屏启动你的webapp

看过Apple webapp API的同窗都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphone\ipod\ipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就能够将当前的页面添加到设备的主屏，在设备的主屏会自动增长一个当前页面的启动图标，点击该启动图标就能够快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true，咱们能够经过navigator.standalone这个属性获知用户当前是不是从主屏访问咱们的webapp的。在Android中历来没有添加到主屏这回事！

六、如何关闭iOS中键盘自动大写 咱们知道在iOS中，当虚拟键盘弹出时，默认状况下键盘是开启首字母大写的功能的，根据某些业务场景，可能咱们须要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，经过指定autocapitalize="off"来关闭键盘默认首字母大写。

********************分割线*************************

缓存控制

下面这行:

与下面一行有相同的效果:

某些 WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种状况下, 解决方案是在服务器端的 HTTP 响应中设置 HTTP 头.

HTTP刷新

注意的是这个 XHTML MP 例子中须要 <meta http-equiv="Cache-Control" content="no-cache"/>. 若是上述代码没被包含, WAP 浏览器将仅仅显示缓存中的文档的复本, 而不须要每次刷新都链接服务器.

某些 WAP 浏览器是不支持 HTTP 刷新的. 例如, HTTP 刷新在 Openwave 移动浏览器 6.2.2 版上运行良好, 但在 Nokia 移动浏览器 4.0 版, Sony Ericsson T610 和 T68i 移动电话模拟器上是不起做用的.

注释

clearType字体

定义页面尺寸

IE的使用:<META NAME="MobileOptimized" CONTENT="240">

google搜索中知道这个能够解决flash不能全屏的问题,本身没遇到过。

其余使用:<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

本文来源：http://www.bubuko.com/infodetail-282777.html