东西看起来真的很小，当我打开它在我的手机上，我怎么能解决这个与CSS

ef1yzkbh 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(122)

所以，我知道响应式设计背后的原则，所有这些都是@media的东西。但我有一个非常简单的html项目。项目：

<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>RegEx Profanity Filter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

    <body>
 <p>Insert profanity laced rant here:</p>
<textarea rows="4" cols="50">

</textarea>

<input type="button" value="Click me" onclick="check()">

<div id = "filtered"></div>

</body>

当我在笔记本电脑上打开它们时，它们看起来很好。Regex亵渎过滤器中的所有内容占据了屏幕宽度的1/3。但是当我用Safari在iPhone上打开它时，这仍然是真的，这使得所有东西看起来都很小。
我甚至尝试将第一个项目中的所有内容 Package 在一个名为“everything”的div中，并在屏幕为900 px或更小时将其宽度设置为100%。我没想到会成功，但事实并非如此。
我该怎么解决这个问题？

css

来源：https://stackoverflow.com/questions/76410479/stuff-looks-really-small-when-i-open-it-on-my-phone-how-can-i-fix-this-with-css

1条答案

按热度按时间

kqlmhetl1#

通过<head>中的<meta>标记设置视口。

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

这行代码告诉浏览器设置viewport的宽度以匹配设备屏幕的宽度，并以100%的缩放级别初始显示网页。这有助于确保网页在不同的设备上正确地和响应地显示。

**name=“viewport”：**该属性定义了元数据的用途，即指定viewport的设置。
**width=device-width：**此部分将视口的宽度设置为设备屏幕的宽度。
**initial-scale=1.0：**此部分设置页面首次加载时的初始缩放级别。比例为1.0意味着页面以100%的缩放级别显示，而没有任何初始缩放或缩放。

MDN - Viewport meta tag
W3Schools - Responsive Web Design - The Viewport

赞(0）回复(0）举报 2023-06-07