viewport 订阅
Viewport
信息
操作系统
跨平台
开发语言
JavaScript
开源协议
MIT
Viewport
Viewport 是一个 JavaScript 组件让你实现轻松的网页 viewport 管理,你可以获取 viewport 的大小维度,可帮你在 JS 中做一些检查。
收起全文
精华内容
下载资源
问答
  • viewport

    2016-08-13 22:11:42
  • Viewport

    2019-10-27 02:04:43
    什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个...

    什么是 Viewport?

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

    viewport 翻译为中文可以叫做"视区"。

    手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

    设置 Viewport

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
    • height:和 width 相对应,指定高度。
    • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
    • maximum-scale:允许用户缩放到的最大比例。
    • user-scalable:用户是否可以手动缩放。
    展开全文
  • ViewPort

    2018-11-04 19:05:18
    Viewport介绍 一、Viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但...

    Viewport介绍

    一、Viewport的概念

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

     

    二、css中的1px并不等于设备的1px

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css 中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理 像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如 iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像 素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着 同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为 ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不 同,没有一个定论。

    还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。

     

    三、利用meta标签对viewport进行控制

    我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

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

    该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也不允许用户缩放不同的网站有不同的要求,但让 viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

    meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。

    在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

    width

    设置layout viewport  的宽度,为一个正整数,或字符串"width-device"

    initial-scale

    设置页面的初始缩放值,为一个数字,可以带小数

    minimum-scale

    允许用户的最小缩放值,为一个数字,可以带小数

    maximum-scale

    允许用户的最大缩放值,为一个数字,可以带小数

    height

    设置layout viewport  的高度,这个属性对我们并不重要,很少使用

    user-scalable

    是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

    这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

     

    四、总结

    第一,必须设置 meta viewport 标签

    如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。

    第二、设置浏览器视口宽度为设备理想宽度

    每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系,在css中,这个宽度就相当于100%的 所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device- width这个特殊值就行了

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


    --------------------- 
    作者:pQ561017_ 
    来源:CSDN 
    原文:https://blog.csdn.net/pQ561017_/article/details/81203331 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • Viewport

    2013-05-30 21:44:33
    Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽, 这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),...

    Viewport
        手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,
        这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
    Viewport 基础
        一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
        width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
        height:和 width 相对应,指定高度。
        initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
        maximum-scale:允许用户缩放到的最大比例。
        minimum-scale:允许用户缩放到的最小比例。
        user-scalable:用户是否可以手动缩放
    viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport。它们要解决的问题是相同的,即无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。
    通过设置viewport让页面在浏览器里有相同的分辨率。比如网站是800px宽,可以通过设置viewport的width=800,来让网站在这几种不同的设备上都刚好满屏显示。

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,279
精华内容 21,311
关键字:

viewport