html 元视口标签

Question

我建立了一个html登陆页面，你可以看到它这里 我以这种方式使用元视口标签：

<meta name="viewport" content="width=device-width">

当我从手机进入此页面时，页面宽度不适合屏幕， iPhone 示例 - http://mobiletest.me/iphone_5_emulator/#u=http://tzabar.exactive.co.il/ 我做错了什么？

Answer 1

---

根据 War10ck 的建议，考虑将视口元标记更改为如下所示：

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

您还可以更改 CSS 来帮助您完成任务。考虑更改 .content 类。例如：

.content{
  width: 100%;
  max-width: 930px;
}

我不确定你的最终设计目标是什么，但这应该会让你朝着正确的方向前进。您还可以研究 Bootstrap http://getbootstrap.com/ 之类的东西来帮助您使网站具有响应能力。

Answer 2

首先，遵循 jmadden 的好建议，将你的视口标签更改为类似

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

然后在 style.css 的第 54 行你有：

.content {
    width: 930px;
    margin: 35px auto;
}  

您需要删除 930px 宽度或使用媒体查询覆盖它，因为在狭窄的视口中，它会防止页面布局崩溃。

希望这有帮助

Answer 3

我的代码：

<script type="text/javascript">

var meta1 = document.createElement("meta");
    meta1.setAttribute("charset", "utf-8");

var meta2 = document.createElement("meta"); 
    meta2.setAttribute("name", "viewport");
    meta2.setAttribute("content", "width=device-width,height=device-height,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover,target-densitydpi=device-dpi");

var meta3 = document.createElement("meta"); 
    meta3.setAttribute("name", "theme-color");
    meta3.setAttribute("content", "#0055ff");

var fonts = document.createElement("link");
    fonts.setAttribute("rel", "stylesheet");
    fonts.setAttribute("crossorigin", "anonymous");
    fonts.setAttribute("href", "https://fonts.googleapis.com/css2?family=Text+Me+One&display=swap");

var icons = document.createElement("link");
    icons.setAttribute("rel", "stylesheet");
    icons.setAttribute("crossorigin", "anonymous");
    icons.setAttribute("href", "https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css");

document.getElementsByTagName("head")[0].appendChild(meta1);
document.getElementsByTagName("head")[0].appendChild(meta2);
document.getElementsByTagName("head")[0].appendChild(meta3);
document.getElementsByTagName("head")[0].appendChild(fonts);
document.getElementsByTagName("head")[0].appendChild(icons);</script>

在CSS代码中：

<style type="text/css">
html,
    body,
        *,
            *::before,
                *::after{
                    -webkit-touch-callout:none !important;
                    -webkit-user-select:none !important;
                    -moz-user-select:none !important;
                    -ms-user-select:none !important;
                    user-select:none !important;}

html{
    -webkit-scroll-behavior:smooth !important;
    -moz-scroll-behavior:smooth !important;
    -ms-scroll-behavior:smooth !important;
    scroll-behavior:smooth !important;
    -webkit-text-size-adjust:none !important;
    -moz-text-size-adjust:none !important;
    -ms-text-size-adjust:none !important;
    text-size-adjust:none !important;
    -webkit-touch-action:manipulation !important;
    -moz-touch-action:manipulation !important;
    -ms-touch-action:manipulation !important;
    touch-action:manipulation !important;}

body{
    -webkit-overscroll-behavior:contain !important;
    -moz-overscroll-behavior:contain !important;
    -ms-overscroll-behavior:contain !important;
    overscroll-behavior:contain !important;
    font-family:"Text Me One";
    height:100vh;
    width:100vw;
    padding:0;
    margin:0;}</style>

SUNDAGEEKS 印度尼西亚的响应式演示