ViewMeta tag: core configuration guide for responsive web pages
In the era of mobile Internet,
Viewport Meta
The label is the most important in the web development
<head>
One of the elements. If you do not have the correct viewer configured, the mobile browser will default by 980px (usually the desktop end width) renders pages extremely small text, which users must use double-clicking or double-finger scaling to read. This tool is designed to help developers generate visual configuration codes that best meet modern standards.
1. Why
width=device-width
So important?
This instruction tells the browser that the page should be as wide as the physical width of the device. Complement
initial-scale=1.0
, it ensures that the page is displayed in 1:1 at the time of loading, without automatically narrowing. It's a reality.
Responsive Design
First step.
2. Understanding
viewport-fit=cover
With the popularization of the iPhone X-ray or full screen devices, the content of the web page may be virtualized by the Liu Hai or bottom of the screen Home key mask. Through Settings
viewport-fit=cover
, the page can be extended to the physical boundaries of the screen. Developer can match CSS variables
safe-area-inset-*
Ensure that core interactive content remains in the security area.
3. Disputes and trade-offs of User Scalable
Settings
user-scalable=no
or limitations
maximum-scale
This prevents an unexpected zooming in of the page when the user is focused on the input box, providing a more original App experience. However, in the light of
Accessibility
♪ Thinking of apples in safari at iOS 10+ ♪ The directive prohibiting scaling was ignored by default to ensure that users with impaired vision could still magnify their reading. Unless there is a strong interactive justification, it is usually recommended that the user scaling be kept on.
PWA Fit to WebApp
If you want your web page to run like the original App after being "added to main screen" by the user, add it to the visual configuration
apple-mobile-web-app-capable
- Like labels. 'WebApp 'for this tool Enhanced "options can generate these codes by one key, hide the browser address bar and toolbar, and provide insinuation experience.
Common Question Answers (FAQ)
Q: Why did I write in the code that I was not scaling, iOS or scaling?
A: This is a system-level strategy for iOS Safari, designed to protect accessibility. If you need control scaling, check CSS Whether the layout has led to unnecessary spillovers rather than imposing a ban on user behaviour.
Q:
shrink-to-fit=no
What's the use?
A: This is dedicated to iOS 9 is introduced to prevent the automatically shrinking of page contents when they exceed the width of the view. In modern browsers, this is no longer a requirement, but it is recommended that it be retained in pursuit of extreme compatibility.