移动手机网站开发

额……50分招来了一群外行……楼主替你悲哀一下~言归正传哈~现在手机都是用HTML5和CSS3来开发网页了，而JS的选用也有讲究，JQ是为了兼容各个浏览器才写的东西，大而且不适用手机端，手机端只要兼容webkit内核的浏览器就行了~所以可以使用zepto.js（你可以去搜一下）用法跟JQ一样，但是比JQ小很多很多，不兼容IE（手机端就不考虑IE浏览器了吧~）用法和JQ基本一样，不用多学，然后再一个就是可以试试quo.js这个跟JQ也差不多，但是它追加了很多触屏手势的支持。建议使用这些小的JS库，方便手机运行~

      响应式网站的优势是一套代码、后台管理系统也是一套，可以适配不同的屏幕。其实，你上述的方法1实现调转，不过是PC和移动网站之间调转，在制作手机版还是要采用响应式设计，因为移动端的屏幕分辨率也是五花八门。       目前，最省事的方法是PC端一套，手机端用响应式设计。可以采用CSS3媒体查询、流动布局以及rem，控制根元素默认字体大小的Javascript代码如下：       1234567891011121314    (function (doc, win) {        var docEl = doc.documentElement,                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',                recalc = function () {                    var clientWidth = docEl.clientWidth;                    if (!clientWidth) return;                    docEl.style.fontSize = 20 * (clientWidth / 1400) + 'px';                };         if (!doc.addEventListener) return;        win.addEventListener(resizeEvt, recalc, false);        doc.addEventListener('DOMContentLoaded', recalc, false);    })(document, window);    谢谢您的回答

一、iOS + Safari1、打开手机web检查器。通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。2.链接电脑（Mac）2.1 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）2.2 再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：3.调试网页如上3.3图所示，此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：二、Android + Chrome1.设置手机1.1【设置】>【关于手机】>【版本号（Build number）】，对版本号这一项连点7下（这是官方文档里的说法）就会提示“你已成为开发者”。1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。2.设置电脑（Mac）这块比较麻烦，因为要装一下Android的SDK。2.1 下载Android SDK，并解压，我把整个adt目录放在了 /Users/David/adt/ 这里。2.2 设置环境变量 。打开终端在David路径下（形如 DaviddeMacBook-Pro:~ David$）输入 open .bash_profile，如果文件存在则会打开，如果不存在则再输入touch .bash_profile 创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ，关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。3.链接电脑3.1 在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～我只是强调平台的不同，不要误会）。3.2 打开电脑上的Chrome，在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面（点击查看大图）：4.调试网页4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】，或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表，如下图：4.2 点击上图中的网站缩略图，就会跳转到Google的一个代理链接（链接可能被墙……，挂代理）就会打开如下图所示的控制台（点击查看大图）：4.3 这就和电脑上网页调试没什么差别了，鼠标经过DOM节点，手机上的布局同样也会高亮起来：

响应式设计不是万能的，它有一定的好处，但也有一定的弊端。先给出结论：如果开发资源充裕，不应该考虑使用响应式设计来同时支持移动端和桌面端。因为响应式的优点就是开发快。打个比方，移动端和桌面端的开发时间分别是 t，采用响应式设计写一个同时支持两者的网站可能只有 1.2t

随着使用智能手机的人越来越多，手机网站开发项目也成为一种潮流。可是您知道机网站开发框架有几种吗?　　1. LungoJS 　　这个是被认为开发移动网站最好的HTML5开发框架，使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性，可捕捉事件包括滑动、触屏、长按等。无需使用图片，全部采用向量声称。 　　Lungo.JS 无需服务器端支持，可帮助实现 HTML5 特性，包括 WebSQL、Geolocation、 History、 Device orientation 等等。这是一个完全可定制的框架，可用来创建应用、游戏等程序。 　　2.Kendo UI 　　Kendo UI是一个HTML5平台，开发者利用它可以开发新颖的、交互的移动应用程序和网站。该框架提供了大量的动画和丰富的拖拽功能、模板功能以及提供了将近10款客户端常用的数据绑定小部件，如图表、组合框以及常用表格。 　　3.Jo 　　该框架可以创建像本地一样的应用，并且兼容任何操作系统，无论是Blackberry、iOS还是Android。并且提供许多HTML5小部件。使用它可以解决任何动画设计方面的问题。 　　4.Sencha Touch 　　Sencha Touch是第一个基于HTML5的移动应用框架，利用JavaScript、HTML5和CSS3来构建移动应用程序，该框架利用本地代理存储离线数据，具体使用HTML5来渲染视频和音频组件。 　　可以让你的Web App看起来就像本地应用程序一样。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的Web标准，全面兼容Android和Apple iOS设备。　　5.52 Framework 　　52 Framework拥有16列的网格模板。该框架来自于CSS3样式里的新“Selection”、阴影、圆角以及有效的HTML5标记。该框架还提供了一些特殊的脚本和样式用于IE6。 　　6.LimeJS 　　LimeJS 是一个 JavaScript 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。允许开发者创建基于 HTML5 的游戏，支持主流浏览器包括iOS。 　　7. G5 Framework 　　如果你想要快速实现Web开发，并且想要重用ant主题或应用程序或网站项目，那么G5 框架是您最好的选择，因为该框架旨在提升开发效率、减少代码。该框架采用特色的PHP激活类、SEO优化技术。除了G5自身所带的这些功能特性外，它还集成其他许多功能，例如Orbit Slider、CSS3 PIE、Reveal Modals、CSS3 Buttons和Tipsy Tooltips等。 　　8.jQuery Mobile 　　jQuery Mobile(jQueryMobile)是 jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。 　　9.Phone Gap 　　PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等。