AngularJS Material移动端站点设计最佳实践：视口设置问题

核心原则：请勿修改viewport的initial-scale参数 #

你当前使用的

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

是移动端响应式适配的标准配置，修改initial-scale属于非规范hack手段，会导致不同DPI设备出现显示缩放异常、交互元素错位、双击缩放失效等问题，完全不推荐使用。

问题根因 #

原有桌面端站点的样式大量使用固定像素（px）定义字体、间距、容器尺寸，未针对移动端小视口做适配。当viewport设置为设备宽度后，桌面端的大尺寸固定像素值在小屏手机上就会呈现整体放大的效果。

适配最佳实践 #

1. 全局切换相对单位适配多设备 #

将全站字体、间距、容器尺寸的单位从固定px替换为rem相对单位，仅需要动态调整根节点html的字体大小，即可实现全站尺寸的同步适配，无需逐个修改组件样式，参考配置：

/* 桌面端默认基准，1rem = 16px */
html {
  font-size: 16px;
}
/* 平板端适配 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}
/* 普通手机端适配 */
@media screen and (max-width: 767px) {
  html {
    font-size: 14px;
  }
}
/* 小屏手机适配 */
@media screen and (max-width: 375px) {
  html {
    font-size: 13px;
  }
}

所有使用rem定义的属性会自动跟随根字体大小缩放，天然适配手机、平板、桌面多设备。

2. 复用AngularJS Material内置响应式能力 #

AngularJS Material自带响应式布局前缀，直接使用layout-xs、flex-sm、hide-gt-md等内置类即可快速实现不同屏幕尺寸下的布局调整，无需额外编写大量媒体查询代码，组件本身也会跟随容器自动适配尺寸。

3. 全局覆盖组件默认字体规范 #

如果需要统一调整所有AngularJS Material组件的字体大小，直接在框架配置层修改typography参数即可，不需要逐个修改组件样式，参考配置：

angular.module('yourApp', ['ngMaterial'])
.config(function($mdTypographyProvider) {
  // 全局调整各层级字体尺寸
  $mdTypographyProvider
    .setFontSize('body1', '14px') // 正文默认字体
    .setFontSize('subhead', '16px') // 子标题字体
    .setFontSize('headline', '22px') // 大标题字体
    .setDefaultFontFamily('Roboto, sans-serif');
});

额外适配建议 #

• 原有固定宽度的容器统一改为max-width: 100%，避免移动端出现横向滚动条
• 不要给html、body节点设置固定宽度，保持宽度100%自适应
• 特殊场景必须使用固定像素的，可结合calc()方法配合相对单位使用，兼顾样式准确性和适配性

内容的提问来源于stack exchange，提问作者Daniel Ellison