Site in Practical: Site for Mobile

视图

移动端浏览器的窗口通常较小，为了解决网页在移动端上面的显示，通常添加下面的代码以控制视图(viewport)：

<meta name=viewport content="width=device-width, initial-scale=1">

应尽量避免使用minimum-scale、maximum-scale、user-scalable。这里依据的原则是尽量少限制用户的选择权。

• 没有指定视图的情况下移动浏览器默认使用800x1024显示网页。
• iPhone的宽度可以认为是320px。

字体

• 基准字体大小为16px。
• 使用相对于基准字体的字体大小定义排版比例。(通常即em)。
• 可以使用浏览器默认的行高1.2em。

摘自Google的一个字体大小建议：

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

自适应布局

所谓自适应布局(Responsive Layout)，主要是指根据屏幕大小调整CSS样式表的内容。实现方法通常如下：

@media (min-width: 1200px) {
  body {
    width:1200px;
  }
}

@media (max-width: 600px) {
  .site-slug {
    display:none;
  }
  .site-name {
    display:none;
  }
}

关于自适应布局的一个建议是从Mobile布局开始，然后逐步“改进”以支持Desktop布局。

这里的原因应该是基于假设“Mobile布局相对更简单一些”。（TODO）

独立的Mobiel站点

毕竟针对Mobile或Desktop的页面设计可能有很大不同。

一个很容易想到的方案自然是单独为Mobile设计一个站点。这自然是有维护的负担。

网络资源

• 使用清晰可辨的字体大小
• Configure the Viewport