- Responsive Web Design with HTML5 and CSS3（Second Edition）
- Ben Frain
- 670字
- 2021-07-16 20:33:57
The viewport meta tag
To get the most out of media queries, you will want smaller screen devices to display web pages at their native size (and not render them in a 980px window that you then have to zoom in and out of).
When Apple released the iPhone in 2007, they introduced a proprietary meta tag called the viewport meta tag which Android and a growing number of other platforms now also support. The purpose of the viewport meta tag is to provide a way for web pages to communicate to mobile browsers how they would like the web browser to render the page.
For the foreseeable future, any web page you want to be responsive, and render well across small screen devices, will need to make use of this meta tag.
Tip
Testing responsive designs on emulators and simulators
Although there is no substitute for testing your development work on real devices, there are emulators for Android and a simulator for iOS.
For the pedantic, a simulator merely simulates the relevant device whereas an emulator actually attempts to interpret the original device code.
The Android emulator for Windows, Linux, and Mac is available for free by downloading and installing the Android Software Development Kit (SDK) at http://developer.android.com/sdk/.
The iOS simulator is only available to Mac OS X users and comes as part of the Xcode package (free from the Mac App Store).
Browsers themselves are also including ever improving tools for emulating mobile devices in their development tools. Both Firefox and Chrome currently have specific settings to emulate different mobile devices/viewports.
The viewport <meta> tag is added within the <head> tags of the HTML. It can be set to a specific width (which we could specify in pixels, for example) or as a scale, for example 2.0 (twice the actual size). Here's an example of the viewport meta tag set to show the browser at twice (200 percent) the actual size:
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
Let's break down the preceding <meta> tag so we can understand what's going on. The name="viewport" attribute is obvious enough. The content="initial-scale=2.0 section is then saying, "scale the content to twice the size" (where 0.5 would be half the size, 3.0 would be three times the size, and so on) while the width=device-width part tells the browser that the width of the page should be equal to device-width.
The <meta> tag can also be used to control the amount a user can zoom in and out of the page. This example allows users to go as large as three times the device width and as small as half the device width:
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
You could also disable users from zooming at all, although as zooming is an important accessibility tool, it's rare that it would be appropriate in practice:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
The user-scalable=no being the relevant part.
Right, we'll change the scale to 1.0, which means that the mobile browser will render the page at 100 percent of its viewport. Setting it to the device's width means that our page should render at 100 percent of the width of all supported mobile browsers. For the majority of cases, this <meta> tag would be appropriate:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Tip
Noticing that the viewport meta element is seeing increasing use, the W3C is making attempts to bring the same capability into CSS. Head over to http://dev.w3.org/csswg/css-device-adapt/ and read all about the new @viewport declaration. The idea is that rather than writing a <meta> tag in the <head> section of your markup, you could write @viewport { width: 320px; } in the CSS instead. This would set the browser width to 320 pixels. However, browser support is scant, although to cover all bases and be as future proof as possible you could use a combination of meta tag and the @viewport declaration.
At this point, you should have a solid grasp of media queries and how they work. However, before we move on to a different topic entirely, I think it's nice to consider what may be possible in the near future with the next version of media queries. Let's take a sneak peak!
- WildFly：New Features
- Node.js+Webpack開發實戰
- C語言程序設計（第3版）
- C++ Builder 6.0下OpenGL編程技術
- Arduino開發實戰指南：LabVIEW卷
- Mastering C# Concurrency
- Learning AndEngine
- Learning Vaadin 7（Second Edition）
- Learning JavaScript Data Structures and Algorithms
- Advanced Express Web Application Development
- Python數據可視化之美：專業圖表繪制指南（全彩）
- Sails.js Essentials
- The Statistics and Calculus with Python Workshop
- After Effects CC技術大全
- Python快速編程入門