當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

viewport实现html页面动态缩放/meta viewport/viewport

發布時間：2024/9/5 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 viewport实现html页面动态缩放/meta viewport/viewport 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

頁面默認縮放比例為1，最小寬度為375px，在小于375px出現水平滾動條的時候重新計算顯示比例縮小界面，

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>viewport</title><meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><script type="text/javascript">var winW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, viewport = document.getElementById("viewport"), scale = 1;if (winW <= 320) {scale = winW / 375.00;}else if (winW < 395) {scale = (winW - 20) / 375.00;}if (winW < 395) {viewport.content = 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';}</script><style>html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.container {width: 768px;margin: 0 auto;height: 300px;box-shadow: 0 0 1px #bebebe;}@media (max-width: 768px) {.container {width: 576px;}}@media (max-width: 576px) {.container {width: 375px;}}p {word-wrap: break-word;}</style> </head> <body><div class="container"><h1>viewport</h1><p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> </div></body> </html>

轉載于:https://www.cnblogs.com/stumpx/p/7889961.html

總結

以上是生活随笔為你收集整理的viewport实现html页面动态缩放/meta viewport/viewport的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。