轩枫阁

前言

随着移动互联网大潮流的到来，移动端H5开发需求也愈加强烈。而移动端页面的调试对开发效率起着重要作用，都有什么调试方法呢？

• 对于Android设备，可通过设备连接Chrome浏览器进行调试（chrome://inspect/#devices）。
• 对于IOS设备，可通过设备连接Mac的Safiri浏览器进行调试（仅Mac可调试）。
• 对于网络，可通过Fiddler连接同一wifi设置代理进行调试。

上面的方案似乎可解决了大部分问题，当然也只是我了解的一部分调试方法。但很多的H5页面需要在一些App内的webview内打开，如微信（需要授权登录）等。这时候就不能使用手机浏览器调试，需要查看一些调试、错误信息的时候，得通过alert的方法来调试，非常傻。接下来介绍的这个插件Rosin，可以解决这个问题，来自腾讯AlloyTeam。

Rosin

Rosin是一个Fiddler插件，协助开发者进行移动页面开发调试，是移动web开发、调试利器。 查看全文

前言

在制作移动页面的时候常会考虑页面在不同手机分辨率下的显示效果，通过一些布局技巧使页面从最小的iphone4 兼容至 较大的iphone6 plus及其他android手机。

然而却常常忽略了一个小细节：用户在使用时有时会切换横/竖屏，而制作页面的时候很少考虑用户切换后的效果。

示例

先来看一下如果没有经过考虑横/竖屏切换后的效果（竖版设计为例）。 查看全文

前言

不知从什么时候起，手机悄悄成为了我们日常生活的一部分！统计显示，智能手机用户平均每6分钟看一次手机，移动端已然是当前最热门的媒介。移动设备上，一些高BG\亮瞎眼的品牌营销运营也经常在我们的朋友圈、各种移动渠道刷过，留下深深或浅浅或没有印象…

手机的屏幕小，决定了人们更容易聚焦查看，可达到与用户近距离一对一交流沟通的效果，如何在移动端做品牌宣传总结了3个要点：快 简 准。

一、快

1、加载要快

部分用户能容忍的响应时间为5秒,64%的智能手机用户希望网站可以在4秒内加载完毕。网页可用性与页面速度——决定成败的基本因素。移动用户比PC用户更加没有耐心，因为用户受到网络连接的限制。

a、尽量使用矢量图形，减少图片加载量

图片下载在下载包中占居榜首，作为视觉设计师要了解的一些减少图片加载量的技巧尽量使用矢量图形，减少使用渐变和真实图片素材，矢量图形色彩渐变少，可复制颜色面积大，所以矢量图片会远比实物图形加载量小。 查看全文

前言

总结下手机界面改版要考虑的布局，主要的分为以下2大类

主导航

1. 列表式
2. 陈列馆式
3. 九宫馆式
4. 选项卡式
5. 旋转木马
6. 行为扩展式
7. 多面板
8. 图表式

次导航

1. 抽屉式
2. 超级菜单式
3. 弹出式
4. 图片轮盘式

其中，所有的主要导航都可以做为次级导航，但次级导航不太适合用作主要导航 。为什么？因为次导航是隐藏起来，隐而不见、只有触发时才显示。

查看全文

前言

本文介绍移动端重构的基础内容，主要包括基本模板、viewport、桌面图标、各种meta属性、QQ浏览器及UC浏览器私有meta。

基础篇

基本模板

查看全文