• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        viewport 的基本原理以及詳細使用方法

          發布時間:2019-10-05 13:50:27   作者:King   我要評論
        這篇文章主要介紹了viewport 的基本原理以及詳細使用方法,需要的朋友可以參考下

        一.viewport的概要

        移動端瀏覽器通常都在一個比屏幕更寬的虛擬窗口中渲染頁面,這個虛擬窗口就是viewport,目的是正常展示沒有做移動端適配的網頁,可以讓他們完整的展現給用戶。我們有時用移動設備訪問桌面版網頁就會看到一個橫向滾動條,這里可顯示區域的寬度就是viewport的寬度。

        常規使用,頁面可以縮放就用下面的代碼

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

        如果不想頁面縮放就用下面的代碼

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

        二.css中的像素和設備像素的區別

        在桌面網頁開發時,css中的1px就是設備上的1px;然而css中的1px僅僅是一個抽象的值,不代表實際像素為多少;而在移動設備中,不同設備的像素密度是不一樣的,css中的1px可能并不等于真實設備的一個像素值。用戶縮放也會改變css中的1px代表多少設備像素。這個比例就是devicePixelRatio

        物理像素/獨立像素 = devicePixelRatio
        我們可以在瀏覽器中進行縮放,在控制臺中打印window.devicePixelRatio來查看devicePixelRatio的大小。其中的獨立像素可以理解為css中的px。

        三.視口基礎

        代碼:

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

        以下為viewport的幾個屬性,這些屬性可以混合來使用,多個屬性同時使用要用逗號隔開。這里我們展開一個概念,叫做ideal viewport,指的是理想情況下的viewport,不需要用戶縮放和橫向滾動條就能正常查看網頁的所有內容,并且能夠看清所有文字,無論這個文字在css中定義為多小,顯示出來時可以看清的。

        屬性 描述
        width 控制視口的寬度,可以指定數字;或設置device-width來指定
        height 控制視口的高度,這個屬性不太重要,很少使用
        initial-scale 控制頁面最初加載時的在在idealviewport下縮放等級,通常設為1,可以是小數
        maximum-scale 允許用戶的最大縮放值,為一個數字,可以帶小數
        minimum-scale 允許用戶的最小縮放值,為一個數字,可以帶小數
        user-scalable 是否允許用戶進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許

        四.viewport進階

        1.width和initial-scale
        當設置了width和initial-scale時,瀏覽器會自動選擇數值最大的進行適配。如設置:

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

        瀏覽器會選擇數值大的進行適配,如果當前窗口ideal viewport寬度為300,initial-scale值為1,取得是width為400的值;如果當前窗口的ideal viewport為480,則取480。

        事實上,width=device-width和initial-scale=1都代表應用ideal viewport,但在ipad、iphone等移動設備和IE上,橫豎屏不分,默認都取豎屏的寬度,兼容性最好的寫法就是

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

        2.動態改變屬性

        a. document.write()

        document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

        b.setAttribute

        var mvp = document.getElementById('testViewport');
        mvp.setAttribute('content','width=480');

        viewport概念

        移動端瀏覽器通常都在一個比屏幕更寬的虛擬窗口中渲染頁面,這個虛擬窗口就是viewport,目的是正常展示沒有做移動端適配的網頁,可以讓他們完整的展現給用戶。我們有時用移動設備訪問桌面版網頁就會看到一個橫向滾動條,這里可顯示區域的寬度就是viewport的寬度。

        css中的像素和設備像素的區別

        在桌面網頁開發時,css中的1px就是設備上的1px;然而css中的1px僅僅是一個抽象的值,不代表實際像素為多少;而在移動設備中,不同設備的像素密度是不一樣的,css中的1px可能并不等于真實設備的一個像素值。用戶縮放也會改變css中的1px代表多少設備像素。這個比例就是devicePixelRatio

        物理像素/獨立像素 = devicePixelRatio

        我們可以在瀏覽器中進行縮放,在控制臺中打印window.devicePixelRatio來查看devicePixelRatio的大小。其中的獨立像素可以理解為css中的px。

        視口基礎
        一個典型的針對移動端優化的站點包含類似下面的內容:

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

        以下為viewport的幾個屬性,這些屬性可以混合來使用,多個屬性同時使用要用逗號隔開。這里我們展開一個概念,叫做ideal viewport,指的是理想情況下的viewport,不需要用戶縮放和橫向滾動條就能正常查看網頁的所有內容,并且能夠看清所有文字,無論這個文字在css中定義為多小,顯示出來時可以看清的。

        屬性 描述
        width 控制視口的寬度,可以指定數字;或設置device-width來指定
        height 控制視口的高度,這個屬性不太重要,很少使用
        initial-scale 控制頁面最初加載時的在在idealviewport下縮放等級,通常設為1,可以是小數
        maximum-scale 允許用戶的最大縮放值,為一個數字,可以帶小數
        minimum-scale 允許用戶的最小縮放值,為一個數字,可以帶小數
        user-scalable 是否允許用戶進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許

        viewport進階

        1.width和initial-scale
        當設置了width和initial-scale時,瀏覽器會自動選擇數值最大的進行適配。如設置:

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

        瀏覽器會選擇數值大的進行適配,如果當前窗口ideal viewport寬度為300,initial-scale值為1,取得是width為400的值;如果當前窗口的ideal viewport為480,則取480。

        事實上,width=device-width和initial-scale=1都代表應用ideal viewport,但在ipad、iphone等移動設備和IE上,橫豎屏不分,默認都取豎屏的寬度,兼容性最好的寫法就是

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

        2.動態改變屬性

        a. document.write()

        document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

        b.setAttribute

        var mvp = document.getElementById('testViewport');
        mvp.setAttribute('content','width=480');

        好了,這篇文章就介紹到這了大家可以根據自己測需要要選擇。一般來說pc與移動不帶自適應的就可以用不支持縮放的,如果跳轉到移動端的可以縮放也沒有影響。

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            中卫 | 永州 | 常德 | 和田 | 南阳 | 汉川 | 南京 | 庆阳 | 淮北 | 临沧 | 楚雄 | 黔南 | 博尔塔拉 | 临夏 | 昭通 | 丽水 | 莆田 | 醴陵 | 平潭 | 瓦房店 | 宝应县 | 荆门 | 黔东南 | 荆门 | 江西南昌 | 泉州 | 朔州 | 台中 | 枣庄 | 图木舒克 | 中卫 | 伊犁 | 嘉峪关 | 揭阳 | 遂宁 | 南平 | 临汾 | 霍邱 | 滁州 | 垦利 | 兴安盟 | 定安 | 库尔勒 | 贺州 | 镇江 | 台湾台湾 | 随州 | 河南郑州 | 长兴 | 南阳 | 榆林 | 营口 | 常州 | 如皋 | 肥城 | 铜川 | 肇庆 | 伊犁 | 石狮 | 株洲 | 库尔勒 | 甘肃兰州 | 池州 | 喀什 | 河南郑州 | 玉树 | 锡林郭勒 | 徐州 | 漯河 | 章丘 | 巴彦淖尔市 | 黔西南 | 庆阳 | 章丘 | 河源 | 长垣 | 资阳 | 石狮 | 阳江 | 安康 | 寿光 | 靖江 | 荣成 | 绍兴 | 抚州 | 肇庆 | 大理 | 清徐 | 大兴安岭 | 宣城 | 大兴安岭 | 舟山 | 楚雄 | 中卫 | 无锡 | 珠海 | 宁波 | 玉林 | 武夷山 | 台北 | 儋州 | 万宁 | 辽阳 | 临海 | 济宁 | 怒江 | 西双版纳 | 安顺 | 海门 | 汕头 | 白沙 | 燕郊 | 伊犁 | 台湾台湾 | 邢台 | 开封 | 山南 | 常州 | 山东青岛 | 岳阳 | 三亚 | 白城 | 铁岭 | 遂宁 | 平凉 | 运城 | 玉林 | 日照 | 邳州 | 台州 | 吕梁 | 白山 | 章丘 | 大连 | 保山 | 广汉 | 苍南 | 启东 | 金昌 | 大庆 | 焦作 | 淄博 | 延安 | 湖南长沙 | 长垣 | 怀化 | 大同 | 酒泉 | 溧阳 | 绥化 | 南阳 | 枣阳 | 定州 | 南充 | 大庆 | 永州 | 大兴安岭 | 诸暨 | 北海 | 本溪 | 昭通 | 蓬莱 | 灵宝 | 衡水 | 广州 | 衢州 | 淮北 | 白沙 | 吉林 | 泉州 | 济南 | 昌吉 | 南京 | 潍坊 | 大同 | 湘西 | 无锡 | 石河子 | 台中 | 徐州 | 四川成都 | 白沙 | 宁德 | 朔州 | 信阳 | 廊坊 | 明港 | 十堰 | 安徽合肥 | 榆林 | 赵县 | 山南 | 晋城 | 仙桃 | 乐清 | 涿州 | 盘锦 | 嘉峪关 | 福建福州 | 宿迁 | 定西 | 徐州 | 广汉 | 三沙 | 阿拉尔 | 吉林 | 沭阳 | 忻州 | 仁怀 | 三亚 | 江西南昌 | 娄底 | 眉山 | 大连 | 玉树 | 灵宝 | 临海 | 阜阳 | 怀化 | 乌兰察布 | 兴安盟 | 洛阳 | 遂宁 | 桐城 | 昆山 | 南平 | 永康 | 余姚 | 溧阳 | 天水 | 平凉 | 黄石 | 九江 | 四川成都 | 孝感 | 潮州 | 钦州 | 文山 | 娄底 | 黔南 | 张北 | 兴化 | 池州 | 庄河 | 溧阳 | 盐城 | 临夏 | 永康 | 日照 | 青州 | 赣州 | 章丘 | 长兴 | 肇庆 | 吴忠 | 台山 | 永新 | 阿勒泰 | 海西 | 西双版纳 | 抚顺 | 陇南 | 泰州 | 锡林郭勒 | 瑞安 | 唐山 | 晋城 | 桓台 | 莱芜 | 库尔勒 | 咸阳 | 马鞍山 | 唐山 | 泰州 | 台北 | 南安 | 恩施 | 章丘 | 吉林 | 鞍山 | 南阳 | 九江 | 阳泉 | 清徐 | 自贡 | 襄阳 | 定西 | 运城 | 玉林 | 阿克苏 | 临沂 | 呼伦贝尔 | 日土 | 青州 | 盘锦 | 温州 | 佛山 | 安阳 | 临沂 | 诸城 | 镇江 | 黄石 | 三亚 | 台山 | 阳江 | 寿光 | 中卫 | 佳木斯 | 包头 | 澳门澳门 | 石嘴山 | 通化 | 丹东 | 锡林郭勒 | 台山 | 吉安 | 图木舒克 | 海南 | 桓台 | 海北 | 铜仁 | 清徐 | 萍乡 | 聊城 | 北海 | 宝应县 | 图木舒克 | 深圳 | 南充 | 湖南长沙 | 凉山 | 广州 | 株洲 | 吴忠 | 南阳 | 株洲 | 遵义 | 芜湖 | 吉安 | 宁夏银川 | 永新 | 朔州 | 承德 | 启东 | 湛江 | 荆州 | 海宁 | 湖北武汉 | 那曲 | 朝阳 | 锦州 | 泗阳 | 海南 | 三明 | 商洛 | 燕郊 | 单县 | 三亚 | 商洛 | 绥化 | 沧州 | 诸暨 | 岳阳 | 运城 | 濮阳 | 禹州 | 达州 | 儋州 | 平潭 | 宜昌 | 驻马店 | 榆林 | 松原 | 威海 | 黔东南 | 塔城 | 海东 | 正定 | 河南郑州 | 铜仁 | 遂宁 | 安阳 | 象山 | 定州 | 长垣 | 宝应县 | 乐山 | 河源 | 武夷山 | 乌兰察布 | 江苏苏州 | 灌云 | 图木舒克 | 天长 | 邹城 | 池州 | 汉中 | 德宏 | 白山 | 柳州 | 任丘 | 通辽 | 安康 | 益阳 | 三沙 | 阿克苏 | 崇左 | 香港香港 | 东营 | 保定 | 厦门 | 黄冈 | 乌海 | 河北石家庄 | 延边 | 泰安 | 仁怀 | 伊春 | 益阳 | 广汉 | 昌吉 | 朝阳 | 金昌 | 张北 | 江西南昌 | 内江 | 澳门澳门 | 绥化 | 神木 | 新疆乌鲁木齐 | 沛县 | 安康 | 淄博 | 黑龙江哈尔滨 | 山南 | 沧州 | 吕梁 | 梧州 | 铜川 | 四川成都 | 惠州 | 安庆 | 河源 | 遂宁 | 五指山 | 明港 | 任丘 | 自贡 | 南通 | 博尔塔拉 | 偃师 | 项城 | 台州 | 珠海 | 垦利 | 内江 | 攀枝花 | 桂林 | 厦门 | 咸阳 | 儋州 | 禹州 | 绍兴 | 株洲 | 惠州 | 天长 | 绍兴 | 和县 | 仁寿 | 池州 | 东莞 | 克孜勒苏 | 吉林 | 三门峡 | 保定 | 宁国 | 曹县 | 宝应县 | 阿勒泰 | 东海 | 宁波 | 包头 | 临沂 | 宁国 | 克孜勒苏 | 镇江 | 燕郊 | 乐清 | 克孜勒苏 | 攀枝花 | 曲靖 | 包头 | 燕郊 | 伊犁 | 吉林 | 攀枝花 | 肇庆 | 鄂尔多斯 | 荆州 | 随州 | 娄底 | 信阳 | 凉山 | 黑龙江哈尔滨 | 桓台 | 厦门 | 阿里 | 伊犁 | 揭阳 | 滨州 | 海北 | 普洱 | 图木舒克 | 克拉玛依 | 招远 | 灵宝 | 六盘水 | 吴忠 | 驻马店 | 福建福州 | 庆阳 | 江苏苏州 | 阿拉善盟 | 张家界 | 保山 | 大兴安岭 | 海丰 | 惠东 | 改则 | 大庆 | 淮南 | 金华 | 乐山 | 宁国 | 七台河 | 济宁 | 衢州 | 赤峰 | 牡丹江 | 江西南昌 | 安顺 | 乐清 | 建湖 | 德宏 | 大庆 | 简阳 | 吉林 | 聊城 | 江门 | 宝应县 | 廊坊 | 攀枝花 | 贺州 | 海西 | 汝州 | 邹平 | 张家口 | 鄂尔多斯 | 陵水 | 基隆 | 汕尾 | 德宏 | 聊城 | 仁寿 | 内江 | 神木 | 台中 | 巴彦淖尔市 | 昌吉 | 河池 | 鄢陵 | 苍南 | 长兴 | 天水 | 海拉尔 | 茂名 | 盐城 | 潮州 | 茂名 | 台中 | 临猗 | 昌吉 | 德清 | 荆门 | 九江 | 滨州 | 天水 | 周口 | 随州 | 诸城 | 汉中 | 周口 | 曲靖 | 白城 | 漳州 | 天门 | 辽宁沈阳 | 龙岩 | 简阳 | 晋城 | 海东 | 龙岩 | 温岭 | 项城 | 泗阳 | 枣阳 | 阳泉 | 株洲 | 宜昌 | 正定 | 浙江杭州 | 莒县 | 海南 | 儋州 | 六盘水 | 新泰 | 株洲 | 咸阳 | 锡林郭勒 | 绥化 | 曹县 | 锡林郭勒 | 阳春 | 慈溪 | 鄂州 | 周口 | 天门 | 曹县 | 海安 | 阿拉善盟 | 娄底 | 中山 | 百色 | 自贡 | 淄博 | 鄢陵 | 广汉 | 定西 | 盘锦 | 兴安盟 | 灵宝 | 承德 | 东阳 | 铁岭 | 天长 | 绍兴 | 宿迁 | 台湾台湾 | 长葛 | 七台河 | 中卫 | 绥化 | 寿光 | 顺德 | 景德镇 | 阳泉 | 宜昌 | 淄博 | 抚顺 | 广元 | 曲靖 | 商洛 | 玉树 | 张家界 | 阿拉善盟 | 大同 | 娄底 | 南阳 | 中卫 | 榆林 | 仙桃 | 德宏 | 靖江 | 防城港 | 绍兴 | 桓台 | 明港 | 泉州 | 上饶 | 河北石家庄 | 威海 | 鞍山 | 辽阳 | 乐清 | 湖北武汉 | 宁国 | 秦皇岛 | 克孜勒苏 | 张北 | 简阳 | 宣城 | 梧州 | 莱州 | 商洛 | 三河 | 松原 | 南京 | 钦州 | 芜湖 | 乳山 | 铜仁 | 潮州 | 巴彦淖尔市 | 阳江 | 遂宁 | 镇江 | 中卫 | 百色 | 泉州 | 漯河 | 毕节 | 台山 | 如东 | 阿拉尔 | 石狮 | 淮北 | 哈密 | 铜川 | 滁州 | 鞍山 | 吉林 | 七台河 | 通化 | 济南 | 湘西 | 辽阳 | 宿迁 | 衡阳 | 三门峡 | 泗洪 | 庆阳 | 秦皇岛 | 正定 | 焦作 | 海拉尔 | 枣庄 | 日喀则 | 清徐 | 大庆 | 赵县 | 五家渠 | 哈密 | 新乡 | 义乌 | 乐山 | 肇庆 | 海宁 | 台南 | 天门 | 七台河 | 海门 | 贺州 | 三沙 | 靖江 | 龙口 | 广安 | 丹东 | 日喀则 | 临沂 | 延安 | 巴中 | 鹤岗 | 荆州 | 宁国 | 那曲 | 日土 | 南阳 | 雅安 | 忻州 | 靖江 | 台州 | 如皋 | 燕郊 | 绥化 | 佛山 | 海西 | 庄河 | 阜新 | 宣城 | 汕头 | 红河 | 枣阳 | 湖南长沙 | 楚雄 | 庆阳 | 宝应县 | 朔州 | 包头 | 平凉 | 玉林 | 徐州 | 六盘水 | 海丰 | 灌南 | 荣成 | 海拉尔 | 昭通 | 铁岭 | 周口 | 徐州 | 泰州 | 乐山 | 苍南 | 宜都 | 曹县 | 鹤岗 | 改则 | 防城港 | 宁夏银川 | 日喀则 | 厦门 | 广州 | 济源 | 台湾台湾 | 姜堰 | 连云港 | 东莞 | 海安 | 绍兴 | 舟山 | 河池 | 宜春 | 三沙 | 西双版纳 | 巴中 | 淮北 | 乐山 | 温岭 | 基隆 | 阿坝 | 四川成都 | 烟台 | 河池 | 三亚 | 启东 | 贵州贵阳 | 伊春 | 朔州 | 芜湖 | 龙口 | 马鞍山 | 大庆 | 乌海 | 汉川 | 醴陵 | 临海 | 鄂尔多斯 | 海安 | 沧州 | 陇南 | 营口 | 泗阳 | 泗阳 | 保山 | 吉安 | 株洲 | 西双版纳 | 驻马店 | 启东 | 仁怀 | 青海西宁 | 沛县 | 海西 | 图木舒克 | 如皋 | 温州 | 渭南 | 昌都 | 琼中 | 潮州 | 铁岭 | 临沧 | 孝感 | 广元 | 宜宾 | 铜川 | 马鞍山 | 神农架 | 来宾 | 清远 | 文昌 | 廊坊 | 乐平 | 阿拉尔 | 沧州 | 安顺 | 商洛 | 内江 | 日喀则 | 阜新 | 邵阳 | 澳门澳门 | 六安 | 南阳 | 克拉玛依 | 天水 | 中山 | 新乡 | 铁岭 | 池州 | 石狮 | 三门峡 | 乌兰察布 | 海门 | 伊犁 | 丹阳 | 文山 | 温州 | 肇庆 | 株洲 | 来宾 | 中山 | 改则 | 白山 | 南平 | 石嘴山 | 自贡 | 菏泽 | 桐城 | 甘南 | 乐平 | 枣阳 | 张家界 | 阿克苏 | 济南 | 漯河 | 淮安 | 新乡 | 娄底 | 宁夏银川 | 黔东南 | 山南 | 商洛 | 宿迁 | 林芝 | 厦门 | 任丘 | 通化 | 忻州 | 鸡西 | 铜仁 | 赤峰 | 德州 | 承德 | 山东青岛 | 鄢陵 | 吐鲁番 | 茂名 | 鄂尔多斯 | 张掖 | 和田 | 怀化 | 慈溪 | 台湾台湾 | 芜湖 | 宜春 | 贵港 | 儋州 | 琼中 | 来宾 | 玉林 | 九江 | 洛阳 | 酒泉 | 玉环 | 日土 | 晋城 | 普洱 | 牡丹江 | 泗洪 | 黔东南 | 池州 | 简阳 | 吉林 | 东台 | 遵义 | 五家渠 | 鄂州 | 桐城 | 象山 | 娄底 | 湖州 | 宝鸡 | 文山 | 项城 | 灌南 | 鹤壁 | 哈密 | 中卫 | 南安 | 崇左 | 佳木斯 | 基隆 | 项城 | 烟台 | 来宾 | 荣成 | 凉山 | 汝州 | 广西南宁 | 博尔塔拉 | 青海西宁 | 济南 | 张家界 | 廊坊 | 鸡西 | 黔东南 | 扬州 | 肥城 | 诸城 | 无锡 | 汝州 | 安庆 | 伊犁 | 东莞 | 三亚 | 滨州 | 莆田 | 泰州 | 阿勒泰 | 株洲 | 泰安 | 金昌 | 明港 | 迪庆 | 黄石 | 广安 | 巴中 | 常州 | 天长 | 宝应县 | 库尔勒 | 南京 | 韶关 | 赵县 | 大丰 | 大理 | 温州 | 雄安新区 | 高雄 | 五家渠 | 吴忠 | 昌吉 | 崇左 | 四川成都 | 乐平 | 盘锦 | 湛江 | 曹县 | 安阳 | 宣城 | 克拉玛依 | 湘潭 | 靖江 | 葫芦岛 | 台湾台湾 | 库尔勒 | 信阳 | 永新 | 怀化 | 博尔塔拉 | 承德 | 凉山 | 昭通 | 运城 | 广州 | 山东青岛 | 张家口 | 和县 | 桐城 | 江苏苏州 | 曹县 | 衡阳 | 陇南 | 鹰潭 | 佛山 | 清远 | 佳木斯 | 宿州 | 平凉 |