在移動端開發專案中，發現頁面在使用 iPhone 訪問的時候，點擊 input 和 textarea 等文本輸入框聚焦 focus() 時，頁面會整體放大，而且失去焦點之后頁面不能回傳原來的樣子，檢查了下功能上沒有什么大問題，但是頁面會整體放大，而且失去焦點之后頁面不能回傳原來的樣子，對于用戶體驗不是很好
最后找到原因：蘋果覺得點擊輸入框放大是一個“很好”的體驗，就擅自把頁面給放大了
可以看到底部有一個橫向滾動條的，無論是對于界面的美觀還是用戶的體驗都很不友好
參照屬性使用mate 設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="icon" href=https://www.cnblogs.com/dengsir39/p/"<%= BASE_URL %>favicon.ico">
那么接下來呢就算是解決了這個問題，小問題記錄一下
mate 說明
??apple-mobile-web-app-capable??洗掉蘋果的默認工具列和選單欄，
??content??? 默認值為 ??no??? ，即正常顯示，如果設定為 ??yes???，Web應用會以全屏模式運行，可以通過只讀屬性 ??window.navigator.standalone??來確定網頁是否以全屏模式顯示，
viewport meta 標簽：
瀏覽器的 ??viewport??是可以看到 Web 內容的視窗區域，通常與渲染出的頁面的大小不同，這種情況下，瀏覽器會提供滾動條以滾動訪問所有內容，
width 屬性控制視口的寬度，可以像 width=600 這樣設為確切的像素數，或者設為 device-width 特殊值，代表縮放為 100% 時以 CSS 像素計量的螢屏寬度，
相應的也有 height 及 device-height 屬性，可能對包含基于視口高度調整大小及位置的元素的頁面有用，
??initial-scale??屬性控制頁面最初加載時的縮放等級，即當頁面第一次 load 的時候縮放比例，
??maximum-scale??屬性控制允許用戶縮放到的最大比例，
??minimum-scale?? 屬性控制允許用戶縮放到的最小比例，
??user-scalable?? 屬性控制用戶是否可以手動縮放，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556732.html
標籤：Html/Css
上一篇：編程實用工具推薦
下一篇：返回列表