視口
檢視視窗,頁面中html元素的顯示大小
移動端 頁面要想在移動端載入必須進行視口的適配
如果不對頁面進行調整,那麼在移動端載入頁面視口寬度都為980px
解決方案
源資訊標籤,對頁面進行設定
//表示對頁面視口進行約束
(1)做移動端適配新增此標籤,使得頁面不再按照980px載入,按照所用裝置載入
(2)必要內容:
1、width=device-width; 頁面大小和裝置尺寸大小相同
2、user-scalable=no; 表示使用者不可通過兩手指伸縮頁面大小
3、initial-scala=1.0; 設定頁面載入倍率為1.0
可選內容(控制頁面伸縮的保險措施):
1、minimum-scale=1.0; //設定頁面最小縮小倍率為1.0
2、maximum-scale=1.0; //設定頁面最大放大倍率為1.0
這個標籤在頁面中並不是所有移動端裝置都生效,幾乎所有的移動裝置都不生效
生效:安卓的uc瀏覽器,chrome
"utf-8"
>
'viewport' content=
'width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'
>
<
/title>
'js/underscore.js'
>
<
/script>
divbutton
<
/style>
<
/head>
<
/div>
登入<
/button>
document.
queryselector
('div').
onclick
=function()
<
/script>
<
/body>
<
/html>
移動端視口概念
有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度，因此html也佔父包含塊的100 等等 html的父包...
移動端視口
1.什麼是視口?視口簡單理解就是可視區域大小我們稱之為視口 在pc端，視口大小就是瀏覽器視窗可視區域的大小 視窗多大，可視區域 視口就多大 在移動端,視口大小並不等於視窗大小,移動端視口寬度被人為定義為了980 2.為什麼是980而不是其他的值?因為過去網頁的版心都是980 賈伯斯為了能夠讓網頁在移...
移動web viewport（視口）
1.手機擁有了瀏覽器的初期並沒有專門為移動裝置設計頁面，造成的直接結果就是訪問的頁面是直接將電腦頁面進行縮放，操作起來十分不便，viewport就是用來解決這個問題的 2.viewport視口屬性 該屬性只有在移動端瀏覽器上才有用 移動裝置上用來顯示網頁的區域 如果把移動該裝置的瀏覽器當做相框的話，...