zoukankan      html  css  js  c++  java
  • HTML中meta=“viewport”的介绍

    viewport就是浏览器上用来显示网页的那部分区域

    • layout viewport:整个网页所占据的区域(包括可视也包括不可视的区域)  默认的
    • visual viewport:网页在浏览器上的可视区域(浏览器中能够看见的区域)
    • ideal viewport:ideal viewport是一个能完美适配移动设备的viewport(没有固定尺寸,就是屏幕的宽度)

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

    layout viewport默认的,但是由于移动设备比pc端的可视区域小,所以当页面在移动设备上时,字体会很小或出现横向滚动条。为解决此问题,一般会在head里加入代码:

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

    /*width=device-width能使所有浏览器当前的viewport宽度变成ideal viewport的宽度,initial-scale=1是将页面的初始缩放值设为1。*/

    用来将viewport的宽度变成ideal viewport的宽度,防止横向滚动条出现。

    • width:设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
    • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
    • minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
    • maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
    • height :设置layout viewport 的高度,这个属性对我们并不重
    • user-scalable:是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

     

  • 相关阅读:
    linux CentOS6.5 yum安装mysql 5.6
    CentOS6.5安装指定的PHP版本(php5.5)(转)
    openssl加密文件过程
    我的投资
    我的unity3d之路_01_序言
    我为什么想转Unity3d
    TensorFlow_01_真正从零开始,TensorFlow详细安装入门图文教程!
    为什么掌握 UML 建模是成为编程高手的一条捷径?
    《UML面向对象建模与设计》一书
    OOAD基本概念
  • 原文地址:https://www.cnblogs.com/M-miao/p/11315220.html
Copyright © 2011-2022 走看看