所以，我知道響應式設計背后的原則，媒體的東西。但是我有一個非常簡單的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。但當我在iphone中用Safari打開它時，這仍然是正確的，這使所有東西看起來都很小。
我甚至嘗試將第一個項目中的所有內容都包裝在一個名為& quot一切& quot并且當屏幕為900像素或更小時，將其寬度設置為100%。我沒想到那會有用，但它沒有。
我該如何解決這個問題？
通過& ltmeta & gt標記在& lthead & gt。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>這行代碼告訴瀏覽器將視窗的寬度設置為與設備屏幕的寬度相匹配，并且最初以100%的縮放比例顯示網頁。這有助于確保網頁在不同的設備上正確且響應性良好地顯示。
name = & quot視窗& quot:此屬性定義元數據的用途，即指定視口設置。
width=device-width:這個部分將視口的寬度設置為設備屏幕的寬度。
initial-scale=1.0:該部分設置頁面首次加載時的初始縮放級別。比例1.0表示頁面以100%的縮放比例顯示，沒有任何初始縮放。
MDN -視口元標記 W3Schools -響應式網頁設計-視窗