主机格调

很高兴在公司争取了半年后,终于从后台页面转到移动端了。想想还有点兴奋呢!本周已经在投入全部精力开发微信页面,跟传统页面有相似处,也有不同点,以后有机会再聊。

初步的野心有点大,想把自己学习的经历一点点的写出来,让自己和他人都可以从中有所收获,希望自己可以坚持更新这个系列。

测试环境:

因为移动端主要是在手机和平板上展示,但代码还得在电脑上制作,所以就需要一个环境,可以通过手机和平板访问到电脑里制作好的网页,来展示效果。因为我业余也搞搞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调试移动端网页

最终效果如下图:

chrome调试移动端网页

希望今天写的可以帮到刚入门移动端网页制作的朋友们。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/467.html