英文:
Stuff looks really small when I open it on my phone, how can I fix this with CSS
问题
当我在我的笔记本电脑上打开它们时，它们看起来很好。Regex Profanity Filter中的所有内容大约占据了屏幕宽度的三分之一。但是，当我在我的iPhone上使用Safari打开它时，情况仍然如此，这使得所有内容看起来非常小。
我甚至尝试将第一个项目中的所有内容都包装在一个名为"everything"的div中，并在屏幕宽度小于900px时将其宽度设置为100%。我没有指望那会奏效，而事实上也确实如此。
我该如何解决这个问题？
英文:
So, I know the principles behind responsive design, the @media stuff at all that. But I have a project with very simple html. Project :
<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>
When I open them on my laptop, they look fine. All the content in Regex Profanity filter takes up about 1/3rd of the width of the screen. But when I open it in my iphone with Safari, that's still true, which makes everything look really small.
I even tried wrapping everything in the first project in a div called "everything" and setting its width to 100% when the screen is 900px or less. I didn't expect that to work and it didn't.
How do I solve this?
答案1
得分: 1
通过<head>中的<meta>标签设置视口。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
这行代码告诉浏览器将视口的宽度设置为与设备屏幕的宽度相匹配，并在初始时以100%的缩放级别显示网页。这有助于确保网页在不同设备上以响应方式正确显示。
name="viewport"： 此属性定义了元数据的目的，即指定视口设置。
width=device-width： 这部分将视口的宽度设置为设备屏幕的宽度。
initial-scale=1.0： 这部分设置了页面首次加载时的初始缩放级别。1.0的缩放级别意味着页面以100%的缩放级别显示，没有初始缩放或缩放。
MDN - 视口元标签
W3Schools - 响应式网页设计 - 视口
英文:
Set the viewport through the <meta> tag in <head>.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
This line of code is telling the browser to set the width of the viewport to match the width of the device's screen, and to initially display the web page at a 100% zoom level. This helps ensure that the web page is displayed properly and responsively on different devices.
name="viewport": This attribute defines the purpose of the metadata, which is to specify the viewport settings.
width=device-width: This part sets the width of the viewport to the width of the device's screen.
initial-scale=1.0: This part sets the initial zoom level when the page is first loaded. A scale of 1.0 means that the page is displayed at 100% zoom level, without any initial zooming or scaling.
<br />
MDN - Viewport meta tag <br />
W3Schools - Responsive Web Design - The Viewport
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论