移动端--web开发

最近看到群里对关于 移动端 web开发很是感兴趣,决定写一个关于 移动端的web开发 概念或框架(宝庆对此很是纠结)。也是因为自己一直从事pc 浏览器 web一直对 移动端的不是很重视,所以趁此机会也让自己对 移动端的开发
有个清晰的认识。

环境:

1. 移动端的内核:手机浏览器的内核是什么

在文章中 Android 手机 采用 Webkit。其他的QQ,UC,飞豚 浏览器都基于此开发的。而在iOS以及WP7平台上,由于系统封闭,不允许除  系统自带浏览器内核以外的浏览器内核进入,因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发,优化功能和自制UI。

根据

“   各浏览器对HTML5的测试都有了较大提升,但是稳定性依然不足。知名独立IT博客月关博客表示,浏览器对于HTML5的提升并不是一蹴而就的,在这种跑分竞争持续一定时间之后,大多数浏览器厂商还都是会支持全部的新特性。”

 可以看出 Android,IOS,WP7对html5都是支持的,可能具体某个浏览器的程度不一样。

tips:说到html5,就要提一下css3。在网上搜索了一下,只有一篇文章~Android平台浏览器CSS3兼容性测试虽然文章比较老,但是在看一些框架源码的时候,也确实看到
针对一些 css3 的js代码。所以对css3的使用还是要小心一点。(特别是QQ浏览器)

针对上面的情况,我希望大家用一些比较流行和可靠的css 框架。比如:PRUE (这里的 框架 没有 宝庆同学 理解的那么高深和复杂,更多的像 样式库和样式编写的理念~)

开发:

1. 关于 移动端 web 的开发:webkit
webApp 开发技术要点总结

这篇文章把概念和基础都说全了~ 请注意文章中的链接(指尖下的js)。

通过这篇文章,我想  click,mouse这类的事件 就不要出现在 移动端 web 的开发中了;

:hover伪类 这样的样式       就不要出现在 移动端
web 的开发中了;

知道css对于js开发是很重要的,特别是一些组件的开发。

虽然文章写的很好,但是还要注意兼容性问题。之前谈过,特别是css3 的一些问题,还是多测试一下为好。

框架:

1. 针对“自适应页面”,之前看那过一些关于这方面的博客,感觉并不是很难,但是自己写的时候,就不是那么回事了~

原因:1.    可能是自己的能力和概念理解不够。2    让人无奈的设计。所以只能用现有的框架来解决问题了~

好处:1.    统一的框架,能为多人使用,不用看别人写的代码了~

2.    看看别人写的代码和自己写的做比较,也能提高一下自己。

3.    不用纠结一些框架能够解决的问题了~~~

2.针对“有复杂交互,一般代码不好解决的页面“,可以使用一些js框架。

这里推荐 一个 app framework 相对简单和方面点~但这个框架本身也会有些问题。

对了,针对 移动端 web开发,jquery库的引用~建议使用 app framework 里面"阉割"后jquery库。

要学习 app framework的话:  http://bbs.phonegap100.com/thread-361-1-1.html

移动端--web开发,布布扣,bubuko.com

时间: 2024-10-22 23:52:48

移动端--web开发的相关文章

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

移动端Web开发注意点

不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好. 所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的. 丰富的页面Meta 控制显示区域各种属性: <meta content="width=devic

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

移动端web开发的一些知识点

整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#000; -webkit-transform: sc

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

探究移动端web开发

探究移动端web开发 什么使移动端开发呢?这就是在手机等移动端设备上的网页开发.而当今比较流行的通过rem进行移动端的适配,所以这篇文章会主要介绍一些基本概念以及rem适配方案. 第一部分:基本概念 物理像素:这个就是在屏幕上可以控制的最小显示单位,比如显示颜色的最小单位. css像素: 就是我们在设计网页时在css中使用的像素,比如:border: 1px black solid;这里的1px即为css像素,实际上这种像素就是下面我们要介绍的设备独立像素. 设备独立像素(density-ind

移动端 Web 开发前端知识整理

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,

移动端WEB开发真机测试

关于移动端WEB开发真机测试亲身实验的一些体会. 之前的开发都用Chrom的模拟,但是效果毕竟不如真机,总结几点吧,至于详细的安装过程网上都有教程http://www.cnblogs.com/xiaohuochai/p/5512051.html,这里就不在赘述. BrowserSync是基于Node.js的,是一个Node模块,所以需要先安装nodejs(之后都在它之上进行的(*^__^*) 嘻嘻……) BrowserSync能让PC.各移动设备上的页面同时实时地响应文件的更改,而不用刷新操作~