工作笔记：移动web页面前端开发总结

移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。

1.四大浏览器内核

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

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

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

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

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

2.手机浏览器

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

在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序  的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

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.mediaqueri.es。这里有很多响应式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>
    <title>首页</title>
    <meta name="keywords" content="首页关键字" />
    <meta name="description" content="首页描述" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon-precomposed" sizes="48×48" href="/images/48×48.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72×72" href="/images/72×72.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114×114" href="/images/114×114.png" />
</head>

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />

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

<meta content="yes” name=" apple-mobile-web-app-capable" />

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

<meta content="black" name=" apple-mobile-web-app-status-bar-style"   />

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

<meta content="telephone=no" name="format-detection" />

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

其他注意问题

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

2.请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

3.学会使用webkit-box。

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

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

<meta content="email=no" name="format-detection" />

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

setTimeout(scrollTo,0,0,0);

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

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

7、如何检测用户是通过主屏启动你的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中从来没有添加到主 屏这回事！

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

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

缓存控制
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=300"/>
下面这行:
<meta http-equiv="Cache-Control" content="max-age=0"/>
与下面一行有相同的效果:
<meta http-equiv="Cache-Control" content="no-cache"/>
某些 WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种情况下, 解决方案是在服务器端的 HTTP 响应中设置 HTTP 头.
 
HTTP刷新
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="refresh" content="15"/>
 
注意的是这个 XHTML MP 例子中需要 <meta http-equiv="Cache-Control" content="no-cache"/>. 如果上述代码没被包含, WAP 浏览器将仅仅显示缓存中的文档的复本, 而不需要每次刷新都连接服务器.
<meta http-equiv="refresh" content="15;URL=hello_world_example1.xhtml"/>
某些 WAP 浏览器是不支持 HTTP 刷新的. 例如, HTTP 刷新在 Openwave 移动浏览器 6.2.2 版上运行良好, 但在 Nokia 移动浏览器 4.0 版, Sony Ericsson T610 和 T68i 移动电话模拟器上是不起作用的.
注释
<meta name="author" content="mark"/>
 
clearType字体
<META HTTP-EQIV="cleartype" CONTENT="ON|OFF">
定义页面尺寸
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;" />
 

《工作笔记：移动web页面前端开发总结》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. C# 利用反射更改父类公开对象

    需求 : 有一个保存数据库字段的基础类,现在要加个状态返回给前端,但是又不能改基础类: class BaseA { public string Name { get; set; } } class A ...

  2. Python3 类与对象

    目录 面向对象基础 面向过程编程 面向对象编程 类 什么是类 如何定义类 类的基本操作 对象 实例化对象 对象添加特有属性 对象与类的查找顺序 对象的绑定方法 面向对象基础 面向过程编程 面向过程的核 ...

  3. Spring 学习，看松哥这一篇万余字干货就够了！

    1. Spring 简介 我们常说的 Spring 实际上是指 Spring Framework,而 Spring Framework 只是 Spring 家族中的一个分支而已.那么 Spring 家 ...

  4. 大数据学习笔记——Sqoop完整部署流程

    Sqoop详细部署教程 Sqoop是一个将hadoop与关系型数据库之间进行数据传输,批量数据导入导出的工具,注意,导入是指将数据从RDBMS导入到hadoop而导出则是指将数据从hadoop导出到R ...

  5. Java集合类框架的最佳实践？

    根据应用的需要选择合适的集合对性能是非常重要的.如果一个集合的元素数量是固定的,而且我们能够提前知道固定的数量,那么就可以使用数组,而不是ArrayList. 每个集合都可以设置初始容量,如果我们提前 ...

  6. HYSBZ 1040 骑士 (基环外向树DP)

    Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里,在和平环境中 ...

  7. 牛客NOIP暑期七天营-提高组2

    第一题:ACGT 题目链接:https://ac.nowcoder.com/acm/contest/931/A trie树.hash.map遍历  ①.trie树上的节点多记一个rest值表示还有多少 ...

  8. 《MySQL数据库》MySQL数据库安装（linux）

    1.  下载安装包: 百度网盘:链接: https://pan.baidu.com/s/1toGl8O9gMBpDWn0mHWwFyg 提取码: i51g 官网下载:https://dev.mysql ...

  9. 小白的springboot之路（十三）、过滤器、监听器、拦截器

    0.前言 过滤器.监听器.拦截器在实际开发中经常需要用到,下面我们来介绍一下spring boot中如何使用: 一.------ 过滤器 ----- 1.作用: 过滤器是客户端与服务器资源文件之间的一 ...

  10. Docker network整理

    一.简介 默认情况下容器与容器.容器与宿主机的网络是隔离开来的, 当你安装docker的时候,docker会创建一个桥接器docker0,通过它才让容器与容器.容器与宿主机之间通信. Docker安装 ...