如何讓移動設備上的縮放像PC上一樣？

http://fireman-suppression-84203.bitballoon.com

儘量放大，在這個頁面中的PC（臺式電腦），並嘗試放大（用手指）你智能手機，你可以看到區別？當文字變大時，在PC瀏覽器（例如Chrome）上進行縮放時，它會停留在屏幕的左/右限制上，但是當您試圖放大iPhone時，文本會超出左側&右邊界，你需要左右讀取所有內容。

如何使智能手機上的縮放（在我的情況下爲iPhone 7）與在PC上縮放相同？我希望唯一需要滾動的是上下滾動，我不希望頁面內容（文本，圖片......）溢出到兩邊（並且不，我不想禁用縮放選項手機）。

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 

div { 
    width:85%; 
    margin: auto; 
    border: 3px solid #73AD21; 
} 
</style> 
</head> 
<body> 

<div>Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... </div> 
<br> 

</body> 
</html>

我也試過這樣：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>

這：

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

但它並沒有幫助。

順便說一句 -

有時候，我看到這樣寫的 '視' 元行：

<meta ...>

，有時它是這樣寫的是：

<meta .../>

的區別是什麼這兩個之間？這兩個選項合法嗎？

謝謝！

來源

2017-08-24 Tomas

喜@Tomas，你嘗試過「用戶可升級」設置爲yes或1這裏是鏈接[鏈接] https://css-tricks.com/snippets/html/responsive-meta-tag/ [/鏈接] – bdalina

我也使用相同的元信息你注意到

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

您遇到的問題是，我們正在努力有時擠一個頁面高達1200像素成一個小型的移動瀏覽器窗口。使用視口設置爲特定尺寸的老方法，如

<meta name="viewport" content="width=320" />

的meta標籤的工作不錯，但它有它的侷限性，而且因爲它是非標準的，它已經實現跨瀏覽器的方式不同。

有一個更好的方法，我已經添加了鏈接，以便能夠更多地研究這個問題。基本上你應該使用@viewport CSS樣式來解決你的問題。

ELEGANTLY RESIZE YOUR PAGE WITH THE @-VIEWPORT CSS DECLARATION

A tale of two viewports — part two

要回答你的第二個問題，您添加關於結束斜槓的meta標籤的方法是依賴於網頁的其正在進行的類型。例如，一個XHTML頁面可能會看到結束斜槓，其中作爲HTML5頁面，你很可能會看到沒有結束斜槓。這一切都歸結爲由W3C設置的語義代碼和Web標準。

希望我能夠爲你指明正確的方向。

來源

2017-08-25 01:04:29 DigitalDesigner

因此，對於一個簡單的HTML + CSS頁面像我用，我應該還是應該我不是一個結束斜槓添加到我的視口代碼？並感謝您的鏈接，這有點沉重，很多需要閱讀，但我會檢查它。 – Tomas

如何讓移動設備上的縮放像PC上一樣？

回答

相關問題