这是代码:
<head> <Meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } h1 { width: 100%; background: blue } </style> </head> <body> <h1> Some header text here </h1>
解决方法
To attempt to provide the best experience,mobile browsers render the
page at a desktop screen width (usually about 980px,though this
varies across devices),and then try to make the content look better
by increasing font sizes and scaling the content to fit the screen.
This means that font sizes may appear inconsistent to users,who may
have to double-tap or pinch-to-zoom in order to see and interact with
the content.
这就是宽度不变的原因.浏览器只需缩小整个网页以适应屏幕.
Using the Meta viewport value width=device-width instructs the page to
match the screen’s width in device-independent pixels.
这就是为什么它使用name =“viewport”标签调整宽度.
这似乎有效:
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
有关更多信息,请阅读文档on viewport meta tag at MDN.:
The viewport Meta tag tells the browser that the width of the screen should be considered the “Full Width” of the page. Meaning no matter the width of the device you are on,whether on desktop or mobile. The website will follow the width of the device the user is on.