Web development for Windows Phone 8

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

 

Internet Explorer for Windows Phone is based on Internet Explorer for the desktop; however, there are differences that web developers should consider. This topic describes some of these differences on a high level for both Windows Phone OS 8.0 as it relates to Internet Explorer 10, and Windows Phone OS 7.1 as it relates to Internet Explorer 9. For general info about designing mobile websites, see Designing Web Sites for Phone Browsers.

This topic contains the following sections.

 

Supported standards and technologies

Windows Phone OS 8.0 and Windows Phone OS 7.1 have different levels of support for Internet Explorer for Windows Phone.

Supported standards and technologies for Windows Phone OS 8.0 

Internet Explorer for Windows Phone OS 8.0 supports the technologies and standards listed in Internet Explorer 10 Guide for Developers, except for the items listed in the Unsupported Features for Internet Explorer for Windows Phone OS 8.0 section in this topic.

Extra features supported in Internet Explorer for Windows Phone OS 8.0

The following features are supported in Internet Explorer for Windows Phone OS 8.0, but are not supported in the desktop version of Internet Explorer 10.

  • GPS support for HTML5 geolocation. Windows Phone uses the location stack on the device and uses GPS if it is available.

  • Support for the viewport META tag and its settings, as listed in the viewport settings section of this topic.

  • Support for text scaling.

  • Support for the CSS property –ms-text-size-adjust, as described in the Adjusting Text Size with Custom CSS section of this topic.

  • Support for customizing and disabling link highlighting, such as <meta name="misapplication-tap-highlight" content="no"/>.

Unsupported features in Internet Explorer for Windows Phone OS 8.0

The following features are supported in the desktop version of Internet Explorer 10, but are not supported in Internet Explorer for Windows Phone OS 8.0.

  • InPrivate browsing.

  • CSS Touch views – specifically overview, scroll, and accelerated scrolling.

  • Rotation and angular events as related to gesture events.

  • -ms-hyphens support.

  • Inline HTML5 video.

  • VBScript support.

  • ActiveX support.

  • Cross-window communications, such as the ability to target a window by using script.

  • Extensibility through browser helper objects, toolbars, and other related items.

  • Older web technology support, such as binary behaviors, HTCs, HTML+TIME, and VML.

Supported standards and technologies for Windows Phone OS 7.1 

Internet Explorer for Windows Phone OS 7.1 supports the technologies and standards listed in Internet Explorer 9 Guide for Developers, except for the items listed in the Unsupported Features for Internet Explorer for Windows Phone OS 7.1 section in this topic.

Extra features supported in Internet Explorer for Windows Phone OS 7.1

The following features are supported in Internet Explorer for Windows Phone OS 7.1, but are not supported in the desktop version of Internet Explorer 9.

  • GPS support for HTML5 geolocation. Windows Phone uses the location stack on the device and uses GPS if it is available.

  • Support for the viewport and its properties, as listed in the viewport settings section.

  • Support for the CSS property –ms-text-size-adjust, as described in the Adjusting Text Size with Custom CSS section later in this topic.

Unsupported features in Internet Explorer for Windows Phone OS 7.1

The following features are supported in the desktop version of Internet Explorer 9, but are not supported in Internet Explorer for Windows Phone OS 7.1.

  • InPrivate browsing.

  • Tracking protection.

  • Anti-phishing support.

  • Backward compatibility for Internet Explorer 8 documents. Internet Explorer for Windows Phone OS 7.1 renders these documents in Internet Explorer 9 mode.

  • Cross-window communications, such as the ability to target a window by using script.

  • Multi-stream HTML5 audio.

  • Downloadable fonts such as EOT, TTF/OTF, and WOFF fonts.

  • CMYK image support.

  • VBScript support.

  • ActiveX support.

  • Extensibility through browser helper objects, toolbars, and other related items.

  • Active document support.

  • Older web technology support, such as binary behaviors, HTCs, HTML+TIME, and VML.

  • Full support for complex script languages in all document modes.

  • Surrogate pair support.

  • JIT support for JScript.

  • Some <video> tag attributes and events. Internet Explorer for Windows Phone OS 7.1 doesn’t support preloading audio or video files, and doesn’t support automatic playback of audio or video files. For this reason, the preload and autoplay attributes are unsupported, and the canplay and canplaythrough events are unsupported.

  • Positioning elements in a fixed position relative to the layout viewport.

Controlling the viewport

The viewport layout is a rectangular region that controls how the document’s content is laid out and where text wraps on the page. Internet Explorer for Windows Phone supports the following viewport META tag and value paired settings.

Property name

Value

width

Sets the width of the viewport.

Can be any integer number or device-width.

The range is from 320 to 10,000.

The default value is 320.

On devices with Windows Phone 8 Update 3 (that is, with a version equal to or greater than 8.0.10492), device-width returns a value that is 160 * the physical screen width in inches. If the physical screen width cannot be determined, then device-width returns an estimate which is proportional to the screen resolution.

height

Sets the height of the viewport.

Can be any integer number or device-height.

The range is from 480 to 10,000.

user-scalable

Indicates whether the user can scale the viewport, in other words, whether they can zoom in and out within content.

yes or no

The default and recommended value is yes.

Note

Although available in some browsers, the minimum-scale, maximum-scale, and initial-scale properties are currently unsupported for Internet Explorer for Windows Phone.

Adjusting text size using custom CSS

Internet Explorer for Windows Phone gives developers the option to control the webpage text size by setting the –ms-text-size-adjust CSS property. When the user double-taps a page element, Internet Explorer for Windows Phone scales the viewport to position the double-tapped element within the visible area of the screen. The corresponding text also is scaled to a legible size. Developers may choose to either control the adjusted text size or turn it off.

Note

The –ms-text-size-adjust property is ignored where the viewport tag is present.

The following example turns off text size adjustment for an HTML page:

html { -ms-text-size-adjust:none }

The following example turns on automatic text size adjustment for the body of an HTML page:

body { -ms-text-size-adjust:auto }

The following example adjusts the text size by 150 percent for a division of an HTML page:

div { -ms-text-size-adjust:150% }

Fixed positioning

Elements that are positioned using CSS fixed positioning behave differently between Internet Explorer for Windows Phone OS 8.0 compared to Internet Explorer for Windows Phone OS 7.1. In Internet Explorer Windows Phone OS 8.0 (as well as on the desktop), fixed elements are positioned relative to the client view of the browser window. This means that if an element is fixed in view at the bottom right corner, it will always appear fixed in view at the bottom right corner even when the user scrolls the page up, down, left, or right. On Windows Phone OS 7.1, fixed elements are positioned relative to the document itself and may not remain in view when the user scrolls the page. This means that if an element is fixed relative to the bottom right corner of a document, the user will see it only when navigating to the bottom right corner of the webpage.

Note

When a user zooms in or out in a document, fixed elements scale accordingly.

Unsupported plug-ins

Unlike the desktop browser, in Internet Explorer for Windows Phone users can’t download or install third-party plug-ins, such as ActiveX controls. Webpages shouldn’t prompt users to download plug-ins.

Additional information

To ensure that the WebBrowser control on a Windows Phone 8 device is initialized correctly, verify that the Browser_Loaded event handler sets the IsScriptEnabled property to true before navigating to your HTML content, as shown in the following example:

        private void Browser_Loaded(object sender, RoutedEventArgs e)
        {
            Browser.IsScriptEnabled = true;
            Browser.Navigate(new Uri(MainUri, UriKind.Relative));
        }

See Also

Other Resources

Designing Web Sites for Phone Browsers

Internet Explorer 10 Guide for Developers

Internet Explorer 9 Guide for Developers