很高兴在公司争取了半年后，终于从后台页面转到移动端了。想想还有点兴奋呢！本周已经在投入全部精力开发微信页面，跟传统页面有相似处，也有不同点，以后有机会再聊。
初步的野心有点大，想把自己学习的经历一点点的写出来，让自己和他人都可以从中有所收获，希望自己可以坚持更新这个系列。
测试环境：
因为移动端主要是在手机和平板上展示，但代码还得在电脑上制作，所以就需要一个环境，可以通过手机和平板访问到电脑里制作好的网页，来展示效果。因为我业余也搞搞WordPress主题，所以电脑里一直都有PHP环境。之前也写过相关文章，例如《mac里装MAMP》、《本地搭建PHP环境》，或者是更早发的《Windows 7里装IIS》。
个人比较推荐用PHP环境。不管你是用哪种方法，只要其他设备在局域网里可以访问你自己的网页即可。例如我的局域网地址是http://192.168.2.106:8888/page/likeShare/login.html，这个地址只有局域网里的用户才可以访问。然后手机和平板连接相同的无线wifi，即可访问这个地址做测试。
在手机和平板里输入地址是件痛苦的事情，特别是像iPhone 5S的Safari这种地址栏设计得不科学的浏览器。所以我们还需要借助一个利器：【二维码生成工具】，把局域网链接转为二维码，扫一扫就搞定。强烈推荐chrome插件二维码生成器，非常方便。
调试工具：
这里就不说编辑器了，编辑器随便用什么都可以，我自己已经从EditPlus转到Sublime Text 3了。以前大家调试移动端页面，很多都是装调整浏览器分辨率的插件，或者是在线网站提供很多分辨率来调试。最后才是在移动端上测试，因为这样效率会高一些。写一句就在手机上刷新一次，成本太大了。
自从有了Chrome（现在的版本是41），调试移动端页面变得非常简单！因为新附带了很强大的移动端网页调试功能。装好Chrome后，不管你用什么方式（例如右键审查元素或者F12），打开Chrome开发者工具，左上角有一个放大镜图标和手机图标。如图：
点击手机图标，就进入手机模拟器界面了。简单介绍一下顶部这几个功能：
左上圆圈是取消模拟设备，很少用。左下四横线是如果页面有媒体查询media，就会出现对应的媒体查询区间，很少用。Device就是你自己选择的模拟设备，经常用。Network是模拟网络环境，偶尔用。√是启用右侧的长宽尺寸，刷新是切换横竖屏，2代表屏幕像素比devicePixelRatio，Fit是缩放，UA是User Agent，都很少用。
因为电脑屏幕的宽度比高度大，而默认开发者工具是在下方，导致左上方手机模拟界面会变形，所以我一般都把开发者工具放右侧。点住开发者工具右侧的这两个方形，按住不放，下面会出现一个正方形，选到那，再点一下开发者工具就到右侧而不是悬浮窗了。如下图：
最终效果如下图：
希望今天写的可以帮到刚入门移动端网页制作的朋友们。
莫非捡了个沙发~~ ❗
支持西门
貌似我没设置出来。是我弱爆了吗！！！！
chrome 31开始，加入这个功能，32就换了个位置，33也是相同设置。
windows平台和os x都是一样的。
我这里win和mac都是好的呀
我对流量体会很深。。现在我就是用手机拖电脑上网呢。
那你手机流量还真多啊
高端
微信的接口？
❗ 有Google亲儿子的话可以同步调试~~太帅了。
好东东啊，呵呵
越来越厉害了
🙂 西门加油~
😮 能用微信登录网站了？微信开放接口了
我这只是静态页面而已，没涉及到程序上。
google亲儿子不给力
想试着做移动端网页了:grin:
微信有webapp的接口？
我不知道，我这边只负责页面
看着挺给力的呀。。
非专业人士使用usbwebserver。我只有在91pron下片的时候才会想到按chrome的F12。。。。。
😛 😛 😛 😛 😛 😛 😛 😛 😛 😛 😛
F12+network，哪里有下不了的自拍视频！！！！！！！！！！
好想法啊，我怎么没有想到
好高端！又学习了！
学习了
试了一下，跟实际有点出入。。。
哪里有出入？
博主不更新了啊
你想我了吗？
又见微信了~
可以关注一下 http://browsersync.io/ 这个工具哈，跨各种平台，正打算写文章介绍一下。
看着西门哥还在用 simple-lines 这款主题，顿时感叹啊！
时光如梭是么？
别高兴太早，只怪我太懒。。。
哇 掌握了不少啊 这平台
开始支持移动客户端了- –
❗ 你的风格很适合手机端呢！
那个联合登录时怎么做的，是不是也写个教程啊
实在抱歉，我只负责页面，程序不是我负责的。。。 ❓
🙂 太好了，正想找这方面的。谢谢博主了。自己弄了一个网站，准备做微信接口。收藏了
收藏先，
非常实用，。正好可以再调整一下自己的wap站 呵呵
收藏先
不错，珍藏！
现在贵站已经启用了移动端了吗，我是搜移动端web找到贵站。好像还没有。