移动端--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

图片:

1. mobile web开发中,常常会遇到图片的载入的问题。

主要原因是:1. 为了防止图片失真,图片必须原来的两倍大。

 2. 由于原因1,所以图片无法合并。

因为以上的原因:mobile中页面,图片 会载入的慢。

解决方法: 将图片 转化为 BASE64 格式。转化工具地址:http://tool.oschina.net/encrypt?

type=4

注意点:转化后的 BASE64 格式,会是一个非常长的字符串。不能够将字符串
换行

兼容性 :

1. 为实现对winphone的支持,引用 微软的hand.js
文件。曾经写的touchstarttouchend要改为pointerdown,pointerup

开发工具:

移动调试-android

对于androi手机我们也能够像电脑上chrome下的开发工具一样看到源代码然后调试

看chrome给的官方文档

就是有几个过程

(1) 手机启用usb调试(系统设置 - 开发人员选项 - usb调试)//

(2 ) 电脑上的chrome同意usb debug(工具-检查设备-勾选(同意usb debug))

(3) 用数据线连接手机和电脑,在手机上勾选“ Always
allow from this computer”

(4) 用手机上的 chrome打开要调试的页面

(5) 在电脑上打开chrome://inspect/#devices
然后点击"inspect"就会出现类似于chrome的开发工具的页面之后就能够调试你手机上打开的页面

tips: 国内打开假设打不开~记得第一次 要链接 vpn

版权声明:本文博主原创文章,博客,未经同意不得转载。

时间: 2024-10-09 19:47:47

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

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

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

移动端web解决方案

范畴 移动端web浏览器.至少需要适配的,UC,QQ,各手机内置浏览器,chrome,safari. 是不是觉得和PC端差不多?错了!每款同一版本ios的内置浏览器一样.但每款同一版本android的不同品牌手机内置浏览器有很多细节上的差别(每个手机运营商称其为优化系统).何况每款浏览器还有不同版本.所以移动端web的坑远多于PC端.这是它有N多辅助库的原因. 优点是,它对CSS3,H5的支持远胜PC端. 解决方案 浅析 原生加载 <script>标签罗列,放body结束标签前 模块化加载 r

移动端Web开发注意点

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

前端编程提高之旅(十八)----移动端web流行交互技术方案研究

   在停止实习后,生活最大变化在于没有项目的压力,可以根据兴趣场景,探索技术实现.这个过程对于个人来说,动力自内而外,需求自上而下,都由个人把握.    生活在移动互联网井喷的今天,同时又关注前端技术,平常对微信端流行的交互(或者说玩法)有着特殊的敏感性.如果说之前接触MVC框架还是对单页面网站.CSS3前沿特效有一个概念的话,微信朋友圈及好友分享网页,则把国内网页构建的流行趋势,从幕后推向前台.    乐帝通过研究移动端web流行交互,构建起了一个初步可行的技术方案,用来实现单页面与DOM动

移动端web app开发备忘

最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配: 2.利用Image对象实现图片的懒加载,主要逻辑代码如下: var len = queue.length; var counter = 0; fo

移动端web开发常见问题

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

开发移动端web的一些知识

由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0"/> width=device-width:设置宽度为设备宽度 initial-scale=1.0:初始缩放比例1.0 user-scala

移动端WEB前端开发最佳实践

移动端WEB前端开发最佳实践 Safari,Android Browser,Chrome都是以WebKit为核心的 移动设备和PC之间的页面现实存在差异(Safari中定义了viewport) 在移动设备和桌面端WEB前端开发中,事件绑定存在差异(移动触点) 页面控件设计存差异(点触不灵敏,虚拟键盘弹出框) 移动设备的网络带宽普遍比PC慢,移动页面要设置更简洁 PC页面兼容移动设备 使用流式布局 借助CSS Media queries(媒体查询)技术 使用合适的图片显示兼容方案 保持页面简洁,不

H5缓存机制浅析-移动端Web加载性能优化【干货】

转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Dom Storgage(Web Storage)存储机制 2.3 Web SQL Database存储机制 2.4 Application Cache(AppCache)机制 2.5 Indexed Database (IndexedDB) 2.6 File System API 3 移动端Web加载

移动端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