所以,我知道响应式设计背后的原则,所有这些都是@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%。我没想到会成功,但事实并非如此。
我该怎么解决这个问题?
1条答案
按热度按时间kqlmhetl1#
通过
<head>
中的<meta>
标记设置视口。这行代码告诉浏览器设置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