瀏覽器是否瞭解自己的視口？

的index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    </head> 
    <body> 
    <h1>Hello, world !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1> 
    </body> 
</html>

index2.html

<!DOCTYPE html> 
<html lang="en"> 
    <head>  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 
    </head> 
    <body> 
    <h1>Hello, world !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1> 
    </body> 
</html>

以上兩個HTML文檔的行爲方式相同，當我改變大小的瀏覽器窗口。在第二個文檔中實現元名稱的viewport是什麼？我已經看到引導文檔使用meta標籤，如第二個文檔中的所有css和js文件。以這種方式使用它的優點是什麼？

編輯

出於某種原因，桌面瀏覽器顯示上述兩個文件相同的行爲，但是當我使用的移動broswer（Safari瀏覽器在iPhone）我看到這兩個文件的差異。第二個文檔重新調整了與設備寬度匹配的內容。

來源

2015-04-03 DesirePRG

這是因爲Bootstrap使用viewport標籤來優化其移動瀏覽器的樣式表。您可以嘗試更改HTML的viewport的值，使用Chrome模擬器打開頁面並查看。

而且它更好地瞭解視這些文件：

來源

2015-04-03 08:56:13

豈不是視不必做自適應網頁設計什麼？ – DesirePRG 2015-04-03 09:10:19

@DesirePRG在我看來，視口是響應式網頁設計的基本設置。 – 2015-04-03 09:14:34

但是第一個文檔中的文本是如何自動將自己放在沒有視口屬性的位置（調整窗口大小時）。 – DesirePRG 2015-04-03 09:37:37

瀏覽器是否瞭解自己的視口？

回答

相關問題