viewport实现html页面动态缩放/meta viewport/viewport
生活随笔
收集整理的這篇文章主要介紹了
viewport实现html页面动态缩放/meta viewport/viewport
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
頁面默認(rèn)縮放比例為1，最小寬度為375px，在小于375px出現(xiàn)水平滾動條的時(shí)候重新計(jì)算顯示比例縮小界面，
?
<!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>?
轉(zhuǎn)載于:https://www.cnblogs.com/stumpx/p/7889961.html
總結(jié)
以上是生活随笔為你收集整理的viewport实现html页面动态缩放/meta viewport/viewport的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 根据工作时间计算小组成员得分
- 下一篇： 【转】Spring Bean单例与线程安