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