Yesterday I downloaded Windows Phone Emulator from Microsoft Download Center (http://www.microsoft.com/download/en/details.aspx?id=13890). It came along with Visual Studio 2010 Express, Expression and XNA Game Studio 4. I basically just wanted to see how my mobile website will look on WP7.
Then I realized the display of the web page had some problems, as shown in the following screenshot.
It seems like the phone is showing the website as like on desktop.
Viewport
The screen size of mobile is always an important thing to take care of when I’m developing the mobile version of my website. Phone normally has screen width of about 400px. My Motorola Quench XT3 has the screen size of 320px x 480px (Reference: http://www.gsmarena.com/motorola_xt502_greco-3354.php). Hence, I need to find a way to tell the phone browser to show only the part with text.
So, how about setting the width of the body/div of the web pages? It just won’t work. Actually the screenshot shown above was done by setting the width of the div to be 320px and then positioning it at the center of the page. This method won’t work on most of the phones, except maybe my Android phone. In my Android phone browser, the website auto scale to fit the actual screen width. However, it’s not the case in my friend’s Android phone.
There are two types of viewport: Visual Viewport and Layout Viewport. There are a few very good online articles and discussion about these two viewports. For example, interesting and detailed explanation of the two can be found here: Browser compatibility — viewports and A tale of two viewports — part two. There is a thread discussing this on Stack Overflow: http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport.
Solution
Soon, I found that by adding the viewport meta tag as shown below, the problem seems to be solved.
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />
It allows developers to tell the phone browser how the web page should be shown.
The code above says the width of the viewport to be the width of the device. Setting the maximum-scale to be 1.0 is to prevent users to expand the window size beyond the initial size. Munimum-scale is also playing the similar role. However, these two are currently not supported in the initial release IE Mobile for WP7 (Reference: The IE Mobile Viewport on Windows Phone 7). So, to keep user from scaling the viewport, I have to set user-scalable to be false in the viewport meta tag. Anyway, for details explanation on the viewport tag setting, please refer to The IE Mobile Viewport on Windows Phone 7 (for IE Mobile on WP7) and Configuring the Viewport (for Mobile Safari on iOS). Meanwhile, Firefox also started to support viewport meta tag with the same properties as Mobile Safari two years ago: Using the viewport meta tag to control layout on mobile browsers.
Yup, after adding in the viewport meta tag, the web pages look fine on the emulator.
cuteprogramming 