(持续更新中......)

设置meta 标签

<!-- HTML <head></head> 中加入 -->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

注:

  • width 和height 指令分别指定视区的逻辑宽度和高度,单位是以像素为单位的数字或特殊标记符号(如device-width);

  • initial-scale 指页面初始缩放比例,默认值因智能手机浏览器的不同而有所差异,通常情况下设备会在浏览器中呈现出整个Web 页面,设为1.0则将显示未经缩放的Web 文档;

  • user-scalable 指令指定用户是否可以缩放视区(yes/no);

  • maximum-scale 和minimum-scale 指令用于设置用户对Web页面缩放比例的限制。范围为0.25 ~ 10.0;


使用媒体查询(Media Query) 对指定视图宽度范围的页面进行渲染

例如:

@media screen and (max-width: 980px) {
  /* styles */
}

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

Zhang_zm
139 声望6 粉丝