Yesterday at noon, Google held an online lecture explaining the concepts and methods of adaptive web design, where maintaining the same webpage code enables websites to deliver a better reading experience across various browsing devices (from desktop monitors to smartphones or other mobile products). Here, I will briefly summarize the content of that lecture.
1. Add a viewport tag in the HTML head section.
At the beginning of the website’s HTML file, add a viewport meta tag to tell the browser that the viewport width equals the device screen width and not to apply initial scaling. The code is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This code supports Chrome, Firefox, and IE9+ browsers, but does not support IE8 or browsers below IE8.
2. Add rules targeting different screen resolutions at the end of the CSS file.
For example, the following code can hide the sidebar and automatically adjust the width of the main content area on devices with screen widths below 480 pixels (such as the iPhone). The code below is for Z-Blog; simply modify the relevant tag names for WordPress.
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3. Use relative widths for layout.
The overall framework of the webpage can use absolute widths, but the content framework, sidebar, and other sub-sections within it should ideally use relative widths, making it easier to adjust for different resolutions. Of course, you can also avoid relative widths, but then you would need to add individual div widths targeting small screens within @media screen and (max-device-width: 480px), which is actually more troublesome.
4. Use relative font sizes on the page (optional)
Do not use absolute font sizes (px) on HTML pages; instead use relative font sizes (em). For most browsers, the conversion is usually em = px/16 — for example, 16px equals 1em.
5. Responsive images (optional)
For img tags, simply set max-width: 100%; or width: 100%; with the rule: img { max-width: 98%; }
How can CSS-loaded background-image adapt to different sizes? This is actually achievable in CSS3 by adding the following statement: background-size:100% 100%;
Based on the points described above, I made some modifications to my blog’s CSS and found that I could browse a better-optimized page from an iPhone. However, there was one unresolved issue: the top navbar displayed incorrectly — after wrapping, it was covered by the article below. I wasn’t sure how to better resolve this problem (Update: thanks to a netizen’s suggestion, adding white-space:nowrap; overflow:hidden; to the divNavbar style solved this issue).
The image below shows the homepage of the Moonlight Blog accessed from an iPhone after modifying the CSS for an adaptive webpage. It looks much better than the original unoptimized page, doesn’t it?
In summary, by following the above four steps to make modifications, you can very easily transform a website into a page suitable for browsing on multiple devices. This is indeed a good thing for users who access websites via mobile phones.
Finally, here is the video link for Google’s lecture on adaptive web design — click here to watch online.