视口文件html,视口.html

视口 | 拼命赶进度

data-level="2.3.12"

data-chapter-title="视口"

data-filepath="视口.md"

data-basepath="."

data-revision="Sun Sep 03 2017 23:30:11 GMT+0800 (中国标准时间)"

data-innerlanguage="">

• Introduction

• 1.

  HTML5

  • 1.1.

    常用元素

  • 1.2.

    图片音频视频

  • 1.3.

    列表及表格

  • 1.4.

    表单form元素

• 2.

  CSS

  • 2.1.

    如何引入CSS

  • 2.2.

    选择器

    • 2.2.1.

      通配选择符

    • 2.2.2.

      元素选择符

    • 2.2.3.

      id 及 class 选择符

    • 2.2.4.

      群组选择符

    • 2.2.5.

      关系选择符

    • 2.2.6.

      属性选择符

    • 2.2.7.

      伪类选择符

    • 2.2.8.

      伪对象选择符

  • 2.3.

    CSS的常用样式

    • 2.3.1.

      字体样式

    • 2.3.2.

      元素样式

    • 2.3.3.

      边框样式

    • 2.3.4.

      盒子模型

    • 2.3.5.

      段落样式

    • 2.3.6.

      背景样式

    • 2.3.7.

      列表样式

    • 2.3.8.

      变形样式

    • 2.3.9.

      过渡动画

    • 2.3.10.

      自定义动画

    • 2.3.11.

      布局

    • 2.3.12.

      视口

    • 2.3.13.

      CSS总结

• 3.

  JavaScript

• Published with GitBook

拼命赶进度

(viewport)视口

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类.

• layout viewport（布局视口）:浏览器默认的viewpor.
• visual viewport（视觉视口）:浏览器可视区域的大小.
• ideal viewport（理想视口）:移动设备的理想viewport.

设置meta viewport标签<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

• width – viewport的宽度，支持数值，或特殊字符“device-width”(设备的可见宽)
• height – viewport的高度
• initial-scale – 初始的缩放比例
• minimum-scale – 允许用户缩放到的最小比例
• maximum-scale – 允许用户缩放到的最大比例
• user-scalable – 用户是否可以手动缩放

require(["gitbook"], function(gitbook) {

var config = {"expandable-chapters":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"ace":{},"mdinhtml":{},"highlight":{},"livereload":{}};

gitbook.start(config);

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史