很高兴在公司争取了半年后,终于从后台页面转到移动端了。想想还有点兴奋呢!本周已经在投入全部精力开发微信页面,跟传统页面有相似处,也有不同点,以后有机会再聊。
初步的野心有点大,想把自己学习的经历一点点的写出来,让自己和他人都可以从中有所收获,希望自己可以坚持更新这个系列。
测试环境:
因为移动端主要是在手机和平板上展示,但代码还得在电脑上制作,所以就需要一个环境,可以通过手机和平板访问到电脑里制作好的网页,来展示效果。因为我业余也搞搞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找到贵站。好像还没有。