如何指定Chrome設備模式的視口默認值？

我的問題與此相似，但我在這裏問，因爲沒有提供真正的答案。（meta viewport has no effect in Chrome Device Mode）如何指定Chrome設備模式的視口默認值？

我想了解視口元標記如何影響網頁，我現在只是意識到Chrome的未能正常模擬導致了我幾個小時的困惑，因爲我的測試頁在設備本身呈現不同的效果。

據我所知，iPhone 5S上的iOS將您的頁面渲染爲980像素寬的圖像，然後縮小以適應小屏幕。如果您沒有元標記來指定寬度和初始縮放比例，則文本會很小。在我的手機上，正如預期的那樣，這正是發生的情況，線條在980像素處斷裂。在Chrome的設備模式下，字體大小正常，易於閱讀，線條大約在335px左右。（甚至不在320px，這是物理設備寬度??）

我該如何解決這個問題？這是一個錯誤嗎？有沒有可以改變的設置，使其表現得像物理設備？它使得移動測試完全無用，不是嗎？

這是用來測試的HTML。（無CSS）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Viewport testing</title> 
</head> 
<body> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</body> 
</html>

P.S.無法弄清楚如何用文字包裝Lorem ipsum文本，對不起。

來源

2017-02-15 AlwaysLearning

只需添加

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

，所有的頁面將適合屏幕（無CSS）。這不是一個錯誤，只是缺乏瀏覽器的信息。

來源

2017-02-16 00:03:35

我知道添加這將改變它在手機上的外觀，但這不是問題。對不起，如果我不清楚。我的觀點是，相同的代碼*應該*在我的手機和Chrome中的設備模式中顯示相同的方式，否則有什麼「設備模式」的意義。無論是一個錯誤還是Chrome中的一個設置，我都不知道如何使它像物理設備一樣運行。或者也許是別的。無論如何，我需要做些什麼來使其表現相同？ – AlwaysLearning

Chrome實際上是在忠實地模擬設備。如果您在Android上的Chrome上運行您的示例，則會看到它與DevTools的設備模式中的相同。此外，如果您在DevTools中檢查window.innerWidth，您會發現它是〜980，因爲您預計缺少視口<meta>標記。

您所看到的是Chrome Mobile的另一個模擬方面：字體提升。在傳統網頁上（即沒有視圖<meta>標籤的網頁），Chrome會提高小文本的大小以方便用戶閱讀。這使得您的頁面看起來好像被渲染成實際上更小的寬度。

嘗試disabling font boosting或將圖像添加到您的示例，它應該更清楚地表明仿真正常工作。

來源

2017-02-21 23:32:14

謝謝你的回答，但我沒有Android設備。我將「iPhone 5」的Chrome開發工具設備模式與我的物理iPhone 5S進行了比較。他們不應該完全一樣嗎？除非我不明白你的答案... – AlwaysLearning

不，Chrome的移動模擬仍然只是使用Blink渲染引擎來渲染頁面。它可以非常接近頁面在Android上的Chrome上的外觀，因爲它使用相同的引擎。但是，iOS上的Chrome使用內置的iOS WebView，該WebView使用WebKit，因此桌面版Chrome無法完全模擬它。它是最好的，但是這些差異將會出現 - 大部分情況下，它只是模擬設備尺寸。如果您對您的頁面在設備上的正確行爲很重要，則應在真實硬件上進行測試（特別是針對性能特徵！） –

感謝您的解釋。雖然，我不確定我看到讓一個「模擬器」顯示相同代碼的點不同。我想要使用它的理由是，我可以看到它的外觀，而無需上傳，然後使用我的物理電話進行每一個小改動。我明白一個模擬器並不是每個小細節都準確，但這似乎是一個非常重要的失敗。 – AlwaysLearning

如何指定Chrome設備模式的視口默認值？

回答

相關問題