我想创建一个没有响应的网站,但是如果窗口大小调整,那么一切都会按比例放大/缩小,并保持相同的比例。在小屏幕中这些单词太小无关紧要,首先要防止在调整大小时元素重叠
我试过使用:
<Meta id="Meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
和
<script type="text/javascript"> $(document).ready(function () { $(window).resize(function () { calculateNewScale(); }); calculateNewScale(); // if the user go to the page and his window is less than 1920px function calculateNewScale() { var percentageOn1 = $(window).width() / 1920); $("body").css({ "-moz-transform": "scale(" + percentageOn1 + ")","-webkit-transform": "scale(" + percentageOn1 + ")","transform": "scale(" + percentageOn1 + ")" }); } });
还有CSS
body { width:100vw; height:100vh; }
网站在这里:
kotechweb.com/new_focus/page/about_us
问题是,现在内容在重新调整大小时是重叠的。
解决方法
视图端口:< Meta name =“viewport”content =“width = device-width,initial-scale = 1”>。这将使浏览器在自己的屏幕的宽度上呈现页面的宽度。
本文提供了有关视口元标记的更多信息:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
本文提供了有关视口元标记的更多信息:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag