Log in

View Full Version : Manage The Presentation of Your Web Site With Viewport Tags


Richard Chao
03-17-2011, 07:23 AM
<div class='os_post_top_link'><a href='http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/03/14/managing-the-windows-phone-browser-viewport.aspx' target='_blank'>http://windowsteamblog.com/windows_...r-viewport.aspx</a><br /><br /></div><p><em>"As web browsing on mobile devices continues to grow in popularity, it's more important than ever to design mobile web sites that match the look and feel of native applications. One of the features provided by the browser in Windows Phone that helps with this task is programmatic control over the browser layout viewport."</em></p><p><em><img height="300" src="http://pcworld.uol.com.br/idgimages/imagefolder.2010-10-01.9190733211/wp7_ie.jpg" style="border: 1px solid #d2d2bb;" width="300" /></em></p><p><em>&nbsp;&nbsp; &nbsp; Image courtesy of <a href="http://pcworld.uol.com.br/idgimages/imagefolder.2010-10-01.9190733211/wp7_ie.jpg" target="_blank" title="pcworld.uol.com">PCWorld.uol.com</a></em></p><p>In the beginning, mobile surfing meant wap browsers. &nbsp;As devices gained horsepower with ever increasing screen sizes and faster connections, web sites have transitioned from the&nbsp;aforementioned wap browser to mobile versions to desktop view. &nbsp;Users now have an expectation that when they go to a web site on their mobile device, the page will look like it does on their desktop and not be overly compressed. &nbsp;There is also an expectation that the page will re-flow smoothly and format correctly when transitioning from portrait to landscape view. &nbsp;</p><p>Fortunately for web designers, WP7 OS and its browser allows for programmatic control over the layout viewport. &nbsp;When a page is rendered in the WP7 browser, the default layout viewport width is always 1,024 pixels. &nbsp;The browser then determines the appropriate zoom level to fit the screen. &nbsp;Click read to see how you can use viewport to control the layout viewport width.</p>