转载:The IE Mobile Viewport on Windows Phone 7
2011-11-18 15:14
591 查看
One of the main challenges involved with mobile Web development is getting content to lay out correctly on screens of varying sizes. Over the years, browser vendors have invented a variety of ways to allow developers to control how browsers lay out content, usually using a custom <meta> tag.
First among these was the HandheldFriendly tag, used initially by older Palm models as well as browsers like AvantGo, which has the format:
<meta name=”HandheldFriendly” content=”true” />
This tag indicates to the browser that the page has been laid out by the developer to be viewable on a small screen, and that the browser should not attempt any further layout enhancements. While somewhat effective, it does not offer any granular control over the layout width – it’s just a true/false flag.
Microsoft addressed this particular problem when it came up with the MobileOptimized tag for the PocketPC:
<meta name=”MobileOptimized” content=”320” />
The MobileOptimized tag allowed the developer to inform the mobile browser of the screen width that the page had been optimized for (in this case 320). While an improvement over the simpler HandheldFriendly tag, it still doesn’t offer much control over the layout, especially for devices that have different screen widths.
Today, most modern mobile Web browsers use the Viewport <meta> tag, which allows Web developers to give explicit instructions to a mobile browser regarding how a page should be laid out and respond to user manipulation. The Viewport tag has the format:
<meta name=”Viewport” content=”width=320; user-scaleable=no; initial-scale=1.0” />
The Viewport tag provides the following settings to allow the developer more fine-tuned control over the content’s layout:
*Note: In the initial release, IE Mobile for Windows Phone 7 does not support initial-scale, maximum-scale, or minimum-scale.
Why does IE do this? We made this decision after a large amount of testing real-world mobile Web sites and learning (to our chagrin) that a very large number of sites out there that were using the “device-width” property were in fact not laid out for the device’s width, but were actually optimized for 320 pixels, probably because the majority of devices available on the market prior to Windows Phone 7 were 320 pixels wide. On many sites, this resulted in an empty strip along the side of the page when viewed in Windows Phone 7, since the sites were often using fixed-width 320px elements like <div> tags.
Faced with the difficult decision of a) shipping a browser on which many common sites didn’t lay out optimally but was technically correct in using device-width, or b) making a slight adjustment to accommodate the many sites that didn’t use device-width properly, we decided to use 320 as the setting for device-width.
In addition, if you use "device-width" and then rotate the screen to landscape, IE Mobile will re-size the Viewport to use the new dimensions. You can choose to re-layout your content by listening for the onResize event and then measuring the new width. For hard-coded numbers, IE Mobile simply scales up the content to fit the screen (which is what most other browsers do).
HandheldFriendly
MobileOptimized (overrides HandheldFriendly)
Viewport (overrides both MobileOptimized and HandheldFriendly)
Happy Coding!
Joe Marini
Principal Program Manager, Windows Phone
Microsoft Corp.
joemarin@microsoft.com
http://twitter.com/joemarini
http://developer.windowsphone.com/
原文地址:
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx
参考:
http://blogs.msdn.com/b/iemobile/archive/2011/01/21/managing-the-browser-viewport-in-windows-phone-7.aspx
First among these was the HandheldFriendly tag, used initially by older Palm models as well as browsers like AvantGo, which has the format:
<meta name=”HandheldFriendly” content=”true” />
This tag indicates to the browser that the page has been laid out by the developer to be viewable on a small screen, and that the browser should not attempt any further layout enhancements. While somewhat effective, it does not offer any granular control over the layout width – it’s just a true/false flag.
Microsoft addressed this particular problem when it came up with the MobileOptimized tag for the PocketPC:
<meta name=”MobileOptimized” content=”320” />
The MobileOptimized tag allowed the developer to inform the mobile browser of the screen width that the page had been optimized for (in this case 320). While an improvement over the simpler HandheldFriendly tag, it still doesn’t offer much control over the layout, especially for devices that have different screen widths.
Today, most modern mobile Web browsers use the Viewport <meta> tag, which allows Web developers to give explicit instructions to a mobile browser regarding how a page should be laid out and respond to user manipulation. The Viewport tag has the format:
<meta name=”Viewport” content=”width=320; user-scaleable=no; initial-scale=1.0” />
The Viewport tag provides the following settings to allow the developer more fine-tuned control over the content’s layout:
Viewport Property | Width |
---|---|
width | Sets the width of the viewport, in pixels, or the keyword “device-width”, which means whatever the width of the device screen is. The range is from 320 to 10,000. |
height | Sets the height of the viewport, in pixels, or the keyword “device-height”. The range is from 480 to 10,000. |
user-scalable | Indicates whether or not the user can scale the viewport, or in other words whether or not they can zoom in and out within content. Values can be “yes” or “no”. The default and recommended value is “yes”. |
initial-scale | Sets the initial scale of the Viewport*. Allowable values are 0.1 to 10.0 |
minimum-scale | Sets the minimum allowable scale of the Viewport*. Allowable values are 0.1 to 10.0 |
maximum-scale | Sets the maximum allowable scale of the Viewport*. Allowable values are 0.1 to 10.0 |
How Windows Phone 7 Implements “device-width”
The keyword “device-width” is intended to set the width of the Viewport to the width of the device that is viewing the page. On Windows Phone 7, the device width is 480 pixels. However, you will notice that if you set the Viewport width to “device-width”, IE actually sets the width to 320 (and also pins it to 320 if you specify a width of less than 320).Why does IE do this? We made this decision after a large amount of testing real-world mobile Web sites and learning (to our chagrin) that a very large number of sites out there that were using the “device-width” property were in fact not laid out for the device’s width, but were actually optimized for 320 pixels, probably because the majority of devices available on the market prior to Windows Phone 7 were 320 pixels wide. On many sites, this resulted in an empty strip along the side of the page when viewed in Windows Phone 7, since the sites were often using fixed-width 320px elements like <div> tags.
Faced with the difficult decision of a) shipping a browser on which many common sites didn’t lay out optimally but was technically correct in using device-width, or b) making a slight adjustment to accommodate the many sites that didn’t use device-width properly, we decided to use 320 as the setting for device-width.
In addition, if you use "device-width" and then rotate the screen to landscape, IE Mobile will re-size the Viewport to use the new dimensions. You can choose to re-layout your content by listening for the onResize event and then measuring the new width. For hard-coded numbers, IE Mobile simply scales up the content to fit the screen (which is what most other browsers do).
Default Viewport Widths
Different phone manufacturers have different default widths for the Viewport. The following table lists the known defaults for the current crop of mobile browsers:Phone Browser | Default Viewport Width |
---|---|
Opera Mobile | 850 pixels |
iPhone Safari | 980 pixels |
Android | 800 pixels |
Windows Phone 7 | 1024 pixels |
Windows Phone 7 Support for META Tags
IE in Windows Phone 7 will recognize all three of these meta tags, and will use the settings of the most modern tag that your page includes. IE will look for and use the settings in the following order:HandheldFriendly
MobileOptimized (overrides HandheldFriendly)
Viewport (overrides both MobileOptimized and HandheldFriendly)
Summary
The Viewport tag provides a de-facto standard way of exerting much better control over your content’s layout in today’s mobile browsers. Hopefully, this post has been helpful in illustrating how IE Mobile uses the Viewport and in making your Web sites look great on Windows Phone.Happy Coding!
Joe Marini
Principal Program Manager, Windows Phone
Microsoft Corp.
joemarin@microsoft.com
http://twitter.com/joemarini
http://developer.windowsphone.com/
原文地址:
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx
参考:
http://blogs.msdn.com/b/iemobile/archive/2011/01/21/managing-the-browser-viewport-in-windows-phone-7.aspx
相关文章推荐
- Using the viewport meta tag to control layout on mobile browsers
- 【转载】Installation of Theano on Windows
- Installing the Neurosky Mindwave Mobile on Windows 7 computer
- A New Feature on Windows Mobile-Widget
- windows下python 安装igraph库报错 Cannot find the C core of igraph on this system using pkg-config.的解决
- ZigBee On Windows Mobile--3.模拟器和实物调试
- Windows 2008 / Windows 7 x64: The ‘Microsoft.Jet.OLEDB.4.0′ provider is not registered on the local
- 当主页面关闭时关闭所有子窗口(Close all the child windows on unload of main page)
- Barracks at the base of mobile phones to read half the staff responsible for the content pipeline
- Windows 2008 / Windows 7 x64: The ‘Microsoft.Jet.OLEDB.4.0′ provider is not registered on the local
- [转]ZigBee On Windows Mobile--ZigBee模块天线设计
- hide the task bar and input panel in Windows Mobile
- How to retrieve the phone IMEI code on UIQ3.0
- Unable to start debugging on the web server. Debugging failed because integrated windows authentication is not enabled.
- Creating and Using Menus on Windows Mobile Pocket PCs
- Swap the Command (cmd) and Control (ctrl) keys on your Mac Windows Bootcamp
- Making a Voice Recorder on Windows Phone
- The Full Story on Developing for Media Center in Windows Vista
- Ring Tone Manager on Windows Mobile
- Designing Data Storage Architecture-the data storage offerings available on the Windows Azure platfo