Question

我创建了一个小页面：Link 这是代码：

＆＃13;

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: rgb(25, 81, 118);
}

.text {
    width: 70%;
    text-align: justify;
    font-size: 32px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    margin-top: 200px;
}
nav{
    width: 100%;    
    background-color: white;
}

ul{
    font-size: 0px;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <link href="css.css" type="text/css" rel="stylesheet">
        <meta charset="utf-8"> 
    </head>
    <body>
        
        <div class="text"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
    </body>
</html>

＆＃13;

如果我用我的笔记本电脑查看这一面，它看起来很正常（我使用Mozilla）。现在我用智能手机打开页面，它看起来像这样。

在图片中，数字1是完美的，但不是图片2.文本字段应该是屏幕的70％。也许有人有你的想法。

Answer 1

在head中添加视口：

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

此外，您可以在媒体查询中指定移动CSS：

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

请参阅Media queries for standard devices。

Answer 2

尝试在HTML头中使用此元标记。

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

或

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

有关此问题的详情，请参阅CSS Tricks

上的这篇文章

智能手机的CSS响应式设计

2 个答案: