响应式 Web 设计 - Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下;

<metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

首先什么是Viewport

viewport 是用户网页的可视区域。

官方话来说: 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

设置Viewport

width: viewport宽度;

height: viewport高度 ;

initial-scale: 初始缩放比例;

maximum-scale: 最大缩放比例;

minimum-scale: 最小缩放比例;

user-scalable: 是否允许用户可以手动缩放;


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 开发移动网页时,你一定会遇到下面这段代码: 在网页的 中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其...
    gzgogo阅读 2,284评论 4 16
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 1,566评论 0 4
  • 移动前端开发之viewport的深入理解 一、viewport的概念 通俗的讲,移动设备上的viewport就是设...
    明明三省阅读 15,564评论 1 46
  • 今早起来肚子就有点咕咕响,但我没有马上去买吃的,我要逐渐锻炼这种空腹力。直到近12点才去隔壁买了一小袋桂圆和一个火...
    张春华阅读 343评论 0 0
  • 每天的生活都在与数字打交道,7点起床,9点上班,早餐4元,上22楼,快10点了,日报需要发出,12点午饭时间,...
    沉鱼落雁的懒蛋蛋阅读 264评论 0 0