在智能手机横行的时代，作为一个web前端，不会编写移动web界面，的确是件悲催的事情。当公司准备做一个微信的微网站时，作为一个多年经验的web前端码农，我迷茫了，真心不知道从何下手。
接下来就是搜一堆教程，然后开始编写代码，三天后，我的第一个移动端web页面编写完成。
回头想想，移动端的web页面代码编写远没有我想的那样复杂（可能是我做的这个项目比较简单的缘故）。但是就入门来说，其实是蛮简单的，我把他总结为一下几个方面：特殊的meta标签／百分百比布局宽度／rem设置字体大小／css3的使用。
好吧，让我们开始吧，以下是移动web新手的浅见，老鸟请绕行，如有赐教不胜感激。
 
1.特殊的meta标签；
因为现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，这里有一些针对webkit的特殊meta标签，在开发移动端web是起到很重要的作用：
 
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 
强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
 
<meta content="yes" name="apple-mobile-web-app-capable" />
复制代码
iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
 
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
复制代码
iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
  • <meta content="telephone=no" name="format-detection" />

复制代码

告诉设备忽略将页面中的数字识别为电话号码。
  • <meta content="email=no" name="format-detection" />

复制代码

Android中禁止自动识别页面中的邮件地址，iOS中不会自动识别邮件地址；
（注：由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。当然如果你习惯了html4，那我只能告诉你，还是先学学html5在接着看吧！）
 
2.百分百布局；
拿到设计师的640px（以 iPhone4的比例做的设计稿）的设计稿后，我就严格的按照设计稿设置了各个模块的高度／字号。接下来悲催的事情发生了，写出来的页面在手机上显示的异 常大。我傻了，这是嘛情况！后来咨询专业人士才了解到，虽然iphone4的分辨率是960x640px，但是其屏幕的像素密度比较高，它的实际大小应该 是减半的。所以在写代码时一切的高度／字号都要是设计稿的1/2。接着说百分比布局：
在做移动web页面时，我们要用百分比布局来实现自适应屏幕宽度。有pc端web页面开发经验的同学就会知道，元素的盒子模型（不清楚的同学可以去w3school上查查）。
那我想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？
  • element{
  • width: 100%;
  • padding-left: 10px;
  • border: 1px solid blue;
  • }

复制代码

这样编写代码必然导致出现横向滚动 条，肿么办？要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述（想深入了解的同学 可以到w3school查看，要知道自己动手会更容易记忆）。让我们看看如何解决上面的问题：
  • element{
  • width: 100%;
  • padding-left: 10px;
  • box-sizing:border-box;
  • -webkit-box-sizing:border-box;
  • border: 1px solid blue;
  • }

复制代码

好的，问题被解决了！
 
3. rem设置字体大小；
在这里让我们花一些梳理一下css中的单位：px／em／rem（以下内容摘自0101后花园）
px：就是css中最基本的长度单 位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现。但是，（听到但是的时候是不是突然有些不适，就像每次开发的同学喊我的时候，我的 潜意识会告诉自己，坏了又出bug了！！）如果全篇用px布局会暗藏一个问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-）， 你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。
em：em是相对单位，em相对的基准点就是浏览器的字体大小（浏览器默认字体为16px），所以1em默认等于16px。那么14px＝0.875em; 公式是14/16=0.875em。用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题。
可是，问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：
  • html { font-size: 100%; }
  • .box-0 {
  • height: 1em; /* 此时height等于16px */
  • }
  • .box-1 {
  • font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
  • height: 1em; /* 此时实际height等于10px */
  • }

复制代码

看明白了吧，1em并不是一个固定不变的值，再加上数学是体育老师教的，这不是自作孽吗。没关系，css3为我们引入一个新的单位就是rem可以解决这个问题。
rem：rem和em一样也是一个 相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认 1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推 …（当然万恶的ie678不支持rem，但是还好我们在做的是移动端web页面）
 
4.使用css3；
做这种高大上的移动web页面怎么能少的了css3。不过平时css3用的比较少，这里记下几个我在这个项目中用到的css3属性。更深入的亲们自己去学咯。同样，这里不对属性做赘述，放着强大的w3school不用，我只能对你说：药不能停啊！：
A.圆角（这个太常用了）
  • element{
  • border: 1px solid blue;
  • -moz-border-radius: 3px;
  • -webkit-border-radius: 3px;
  • border-radius: 3px;
  • }

复制代码

B.渐变（这个在做按钮的时候很常用）
  • element{
  • background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
  • background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
  • }

复制代码

C.去掉手持设备点击时出现的透明层 （一般会在头部做格式化）
  • a,button,input{
  • -webkit-tap-highlight-color: rgba(0,0,0,0);
  • -webkit-tap-highlight-color: transparent; /* For some Androids */
  • }

复制代码

在应用了此属性时，链接的 active属性会实效，解决的方法是，在页面unload时运行document.addEventListener("touchstart", function(){}, true);使active状态可用。（注：在小米系统下，点击链接仍然会出现红色的边框，各位同学如有解决方法，请赐教，不胜感激。）
D.改变盒子模型（上面已讲过）
  • element{
  • box-sizing:border-box;
  • -webkit-box-sizing:border-box;
  • }

复制代码

5.关于调试；
好了，有了上面的知识，我们就可以 写一个移动的页面了。但不要太乐观了，我们要怎么调试呢？难道每写一个页面就发一次服务器，然后用手机访问测试环境！当然不需要那么麻烦，如果是用pc机 的同学，可以用一个本地localhost工具调试（这次就不要各位自己动手了，附送上我自己用的工具。用法很简单，把所有的页面放到一个文件夹中，页面 放在根目录下，工具也放在跟目录下，把你要调试的页面改成index.html。当然如果你有好几个页面，最好还是做一个index页面。启动调试器，用 手机访问你电脑的ip，要保证手机所用的wifi和pc的网络在一个网段）。用mac的同学就到网上找一篇localhost的配置方法，开启以下这个功 能就可以访问了。
 
本文摘自http://www.w3cui.com/?p=359
 

移动web前端开发时注意事项的更多相关文章

  1. 移动web前端开发时注意事项（转）

    在智能手机横行的时代,作为一个web前端,不会编写移动web界面,的确是件悲催的事情.当公司准备做一个微信的微网站时,作为一个多年经验的web前端码农,我迷茫了,真心不知道从何下手. 接下来就是搜一堆 ...

  2. web前端开发 代码规范 及注意事项

    web前端开发 代码规范 及注意事项 外部命名规范 html .js .css文件名称命名规范 my_script.js my_camel_case_name.css my_index.html 路径 ...

  3. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  4. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  5. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  6. web前端开发培训和自学 哪种选择更适合你

    web前端相对于其他软件开发是比较容易入门的,但是如果深入学习就比较困难了,这门技能需要从业人员掌握一定的设计.代码.交互技能和一些SEO技能,容易入门还涉及这么多知识和技能,那学习web前端开发到底 ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

  9. Web 前端开发学习之路（入门篇）

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...

随机推荐

  1. 百度全站 https FAQ：技术宅告诉你如何搜索更安全

    百度从 14 年开始对外开放了 https 的访问,并于 3 月初正式对全网用户进行了 https 跳转. 你也许会问,切换就切换呗,和我有啥关系?我平常用百度还不是照常顺顺当当的,没感觉到什么切换. ...

  2. C++标准模板库STL

    STL(Standard Template Library,标准模板库)是惠普实验室开发的一系列软件的统称.现然主要出现在C++中,但在被引入C++之前该技术就已经存在了很长的一段时间. STL的代码 ...

  3. 爬虫、网页分析解析辅助工具 Xpath-helper

    每一个写爬虫.或者是做网页分析的人,相信都会因为在定位.获取xpath路径上花费大量的时间,甚至有时候当爬虫框架成熟之后,基本上主要的时间都花费在了页面的解析上.在没有这些辅助工具的日子里,我们只能通 ...

  4. Oracle数据库操作---基础使用(二)

    此篇承接上一篇的基本原理,继续展开学习,本篇主要面向数据的使用和管理,也就是开发者常用的基础语句,开始喽…… >>>对整表的操作 >创建表   关键字 Create creat ...

  5. spring装配注解（IOC容器加载控制）ComponentScan及ComponentScans使用

    ComponentScan,只写入value,可扫描路径下装配的@Contrller.@Service.@Repository @ComponentScan(value = "com.tes ...

  6. Android-Messenger跨进程通信

    http://blog.csdn.net/lmj623565791/article/details/47017485 一.概述 我们可以在客户端发送一个Message给服务端,在服务端的handler ...

  7. ubuntu下安装 Sublime Text 3 及 PlantUML 绘图插件

    ubuntu下只想做C++的程序代码编写,最开始选择了codeblock,主要目的是安装简单,集成度高,还可以调试,但是用的时候老是无故退出,改了半天的代码就这样丢失,挺苦恼的,可能跟自己装的系统比较 ...

  8. 【 js 基础 】【 源码学习 】源码设计 （更新了backbone分析）

    学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析 第二部分:unders ...

  9. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  10. vue.js关于路由的跳转

    1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...