移动前端webApp开发点滴积累20140524
#webApp开发几点体会(移动前端) ##前言
本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正。 ##再见,IE678
移动设备,Android跟iPhone是主流,即使是win8设备,自带的都IE9以上,再也见不到那个不按W3c套路解释的浏览器了,很多兼容性问题都可以放下,专心处理业务了。 ##HTML5/CSS3
HTML5/CSS3在移动设备上已经非常普及了,再也不用考虑以前在桌面设备上是否有旧版本浏览器的问题了。HTML5的跨平台、便于维护、开发成本低,各种优点使得其在移动设备上应用非常广。phonegap等混合框架的出现也弥补了webapp的缺点,前景非常辽阔。 ##viewport
开发web页面时的一个基础meta属性 <meta content="width=device-width,initial-scale=1.0" name="viewport"> 让页面的宽度与设备宽度一致,并且禁止缩放,如此一来大大减少了web开发的设计成本,并且让web页面显示的效果适当。 ##模拟器
chrome的模拟器(Emulation)真是开发利器,先在桌面上完成大部分的开发与初步的测试,再在专门的设备上测试。 ##devicePixelRatio
这个是设计webApp页面时一个重要的参数,定义如下 window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips 以Samsung GALAXY Note 2为例,我们可以在chrome的模拟器中很快地找到这个设备  这款手机横向物理像素有720,纵向物理像素有1280,但由于devicePixelRatio=2,也就是说横纵各用两个像素来表示原来一个像素的内容,整块屏幕就是用四个物理像素来表示一个像素的内容,这是为了让图像显示更加逼真。对于开发者而言,我们要填充的是内容,故要把横向宽度定为`720px/2=360px`,纵向定为`640px`,开发起来的页面才在此设备上显示正常。 ##hover & touch
不再有hover了,并且开始关注touch。这点开发经验还少,以后再补充。
移动前端webApp开发点滴积累20140524的更多相关文章
- 移动前端webApp开发点滴积累20140629
#移动前端webApp开发点滴积累20140629 ##关于input行内居中的问题 给input设定一个比较高的高度,在某些版本的移动设备上,文字不能垂直居中,即使设定了相同的行高也不行.(见图) ...
- 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~
前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考. 此文中涉及的问题是本人开发中遇到的,解决方案是本人思考 ...
- 【blade利刃出鞘】一起进入移动端webapp开发吧
前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...
- webapp开发调试环境--weinre配置
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就 ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 移动端webapp开发必备知识
移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决 ...
- 常用的移动前端webapp交互细节
#常用的移动前端webapp交互细节 ##select的表现方式 ###PC端 select控件在传统PC桌面已经存在多年,由于在IE6等低版本浏览器容易造成层级错乱,一直被一些UI框架所抛弃,而用d ...
- 创新手机游戏《3L》开发点滴(3)——道具、物品、装备表设计 V2(最终版)
我们正在开发一款新手游,里面有道具,之前也写了一篇博文记录了下我们的设计思路,但是国庆到了,于是我有了时间继续纠结这个问题. 其实我主要是在到底是用mysql还是mongodb上纠结.这个复杂.痛苦. ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
随机推荐
- 章节五、2-Package包和权限修饰符
一.Package包 为了更好的组织类,java提供了包机制,用于区别类名的命名空间. 包的作用: 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了 ...
- 章节四、4-For循环
一.For循环格式 package introduction5; public class ForLoopDemo { public static void main(String[] args) { ...
- [20181015]为什么是3秒.txt
[20181015]为什么是3秒.txt --//以前测试:连接http://blog.itpub.net/267265/viewspace-2144765/=>为什么是12秒.txt.--// ...
- 网络互联技术(2)——前篇—【转载】电脑结构和CPU、内存、硬盘三者之间的关系
原文链接:传送门 详细内容: 电脑结构和CPU.内存.硬盘三者之间的关系 前面提到了,电脑之父——冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器. 我们看一下现在我们电脑 ...
- MySql基本使用方法
一,基本概念 1, 常用的两种引擎: (1) InnoDB a,支持ACID,简单地说就是支持事务完整性.一致性: b,支持行锁,以及类似ORACLE的一 ...
- php配置文件php.ini的详细解析(续)
file_uploads = On // ...
- jQuery -- 光阴似箭(四):jQuery 遍历
jQuery -- 知识点回顾篇(四):jQuery 遍历 通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称 ...
- 使用Java命令行方式导入第三方jar包来运行Java程序的命令
1.首先使用命令行进入到a.java所在的文件夹:(比如我的在D:\javaeeworkspace\SharedPS_WS\src\com\dyf\main 这样一个路径下,) d: 回车, cd D ...
- JAVA 多线程环境下的静态方法
第一: 程序运行的时候,JVM内存主要由以下部分组成: 堆: 所有线程共享一个堆,在 Java 虚拟机中,堆(Heap)是可供各条线程共享的运行时内存区域,也是供所有类实例和数组对象分配内存的区域. ...
- php面试题整理(二)
索引,desc 和explain unset只是删除了变量名