Design Web sites for IE for Pocket PC

The information contained in this document only represents Microsoft Corporation's views on the document and issues on the date of publication. Since Microsoft must respond to the ever-changing market conditions, the information should not be understood as a certain commitment made by Microsoft. At the same time, microsoft does not guarantee the accuracy of the information provided after the publication date.

This document is for reference only. Microsoft does not provide any public or implied warranties in this document.
The BackOffice logo, Microsoft, windows, and Windows NT are registered trademarks or trademarks of Microsoft in the United States and other countries.

Other products or company names mentioned here also belong to the trademarks of their respective owners.

Microsoft Corporation, one Microsoft Way, Redmond, WA 98052-6399, USA

Introduction to Pocket Internet Explorer

Welcome to the world of Pocket Internet Explorer!

With the official release of Pocket PC, Microsoft's Pocket Internet Explorer also provides the most abundant web experience for all similar pocket devices.

Pocket PC can display complex content. Pocket PC has a minimum of 4,096 colors, a maximum of 65,535 colors, and a minimum of 4 levels and a maximum of 16 levels of gray scale based on the type.

Pocket Internet Explorer has put key Internet technology standards into practice: HTML 3.2, Secure Sockets Layer for Security Transaction Processing (encrypted SOCKET protocol layer, SSL) versions 2.0 and 3.0, Microsoft JScript for web page behavior, visitor tracking information, and easier return of users who need to provide user authentication sites and formatting frameworks.

Pocket Internet Explorer can even support ActiveX controls that already exist on the Pocket PC.

Pocket Internet Explorer supports XML (Extended Markup Language), a key technology that allows people to deploy commercial Internet applications to Pocket PCs in a more convenient way.

Pocket Internet Explorer developed for Pocket PC provides several innovative ways to introduce web content into small screens, including:

• The adaptive adjustment feature of "contract matching" dynamically displays Web sites in a small and narrow screen that is unique to the Pocket PC in the maximum visible manner.
• The automatic status detection function automatically determines whether the device is connected to the Internet. If the device is not connected to the Internet, the browser is seamlessly transferred to the previously stored web page.

Pocket Internet Explorer has a unique design and implements an optimized combination of Internet Explorer 3.02 (HTML engine), Internet Explorer 4.0 (script engine), and Internet Explorer 5.0 (XML engine. In view of this, we have compiled this white paper to help Web site designers optimize their websites for Pocket Internet Explorer.

Detect Pocket Internet Explorer on the server

Before designing web pages for Pocket Internet Explorer, we must consider a critical issue.

How does the Web server determine whether the Pocket PC is connected to the site?

If you are using Microsoft Internet Information Services 4.0 and later versions, you will find a file named browscap. ini in the/winnt/system32/inetsrv directory. This file contains descriptions about all known browsers, which are generated when you install the latest service package.

The following is the description of the Pocket Internet Explorer that you must add to the browscap. ini file:

; Pocket PC (aka rapier) [Mozilla/2.0 (compatible; MSIE 3.02; Windows CE; 240x320)] Browser = Pocket IE Version = 4.0 Majorver = #4 Minorver = #0 Platform = Windows CE Width = 240 Height = 320 Cookies = true Frames = true Backgroundsounds = true Javaapplets = false Javascript = true VBScript = false Tables = true Activexcontrols = true

Pocket Internet Explorer is actually a mixture of components contained in Internet Explorer 3.02 (HTML), Internet Explorer 4.0 (scripting), and Internet Explorer 5.0 (XML. This is why the product was identified as Microsoft Internet Explorer 3.02, although it uses version 4.0 in its internal properties.

When Pocket Internet Explorer sends a request to the HTTP server, the following information is contained in the corresponding HTTP request title:

UA-pixels: {I. e. 240x320} UA-color: {mono2 | mono4 | color8 | color16 | color24 | color32} UA-OS: {Windows CE (Pocket PC)-version 3.0} UA-CPU = {I. e. MIPS r4111}

By using the following server-side script lines, the system can quickly generate a special optimization page for the Pocket Internet Explorer as soon as it enters the site:

'Check for Windows CE (Pocket PC, palm-Size PC, handheld PC, handheld PC Pro) If (instr (request. servervariables ("http_user_agent"), "Windows CE") then {Add Windows CE specific code} Else {Add code for other platforms} End if 'Check for Pocket PC If (instr (request. servervariables ("http_ua_ OS"), "Pocket PC") then {Add Pocket PC specific code} Else {Add code for other platforms} End if

 

Use the following code to determine whether Pocket Internet Explorer is using a client script (jscript ):

VaR strnav = navigator. useragent; // Check for Windows CE (Pocket PC, palm-Size PC, handheld PC, handheld PC Pro) VaR isce = strnav. indexof ("Windows CE "); If (isce>-1 ){ // Add Windows CE specific code } Else { // Add code for other platforms } // Check for Pocket PC VaR isppc = strnav. indexof ("240x320 "); If (isppc>-1 ){ // Add Pocket PC specific code } Else { // Add code for other platforms }

Supported HTML tags

Except for some exceptions, Pocket Internet Explorer is basically compatible with HTML 3.2. Therefore, all HTML tags defined according to this standard can be displayed in Pocket Internet Explorer. The following lists the constraints and technical issues that web designers must consider:

• DHTML not supported
• The framework always has boundaries and is always in the adjusted state.
• CSS unsupported

Here we provide some general principles for using HTML tags for Pocket Internet Explorer:

General Mark Problems

Question about target attribute in tag

Pocket Internet Explorer cannot generate multiple forms. Therefore, if you use "target = _ new" in the tag, Pocket Internet Explorer cannot open the second form, this is exactly what you can do when using a desktop computer. You can use the "target" attribute to point to a named framework. Tag also supports this attribute. Use any other specific target (that is, "target = _ new" or "target = foo ") will lead to the same behavior of Pocket Internet Explorer when no target is specified at all.

Pocket Internet Explorer not only does not support the _ top and _ parent attributes, but also does not support the _ Self and _ blank attributes. If the target is an existing named framework or something other than a specific value supported, it will be completely consistent with the target attribute when it is completely ignored. In this case, the browser will navigate to the frame or form to which the clicked link points.

The browser also supports the target attribute marked by area, base, and form.

Font

Pocket PC provides the following four fonts:

• Tahoma (default font for widening fonts)
• Bookdings
• Frutiger Linotype
• Courier (default font for fixed width fonts)

All other fonts can be converted to the above four fonts Based on the font description according to the similarity principle. The use of tags for any fixed-width content can achieve the goal of ensuring that the Pocket Internet Explorer selects the correct fixed-width font.

Framework

The framework usually occupies a large amount of screen space, which is only used to calibrate the edge of the object. Therefore, we generally do not advocate using it in design work for Pocket Internet Explorer. If you really have to use the framework, it is best to keep the number of frames within the two ranges of each screen.

Matching tag

Use HTML tags to correctly match pages.

For example:

Incorrect method:

Incorrect method:

Incorrect match will lead to unpredictable consequences for Pocket Internet Explorer.

Bgsound attributes

Pocket Internet Explorer supports background sound, which can provide very "cool" special effects on webpages. Of course, Pocket Internet Explorer only supports wav files, which usually occupy a large amount of storage space. Therefore, please use the audio effect appropriately and minimize its negative impact. In addition, because Pocket Internet Explorer does not support the loop attribute, you cannot create or use continuous background sound effects.

Form fields and buttons

Text Field and text area

The width of the text field and text area displayed in Pocket Internet Explorer is limited by the width of the Pocket PC screen. You sometimes need to scroll the screen horizontally to see text fields, but text fields can always be fully displayed within the screen range. If you have to use text fields and want to achieve concise and bright results, you should handle them at the beginning of the design based on the principle that the screen width of the Pocket PC should not exceed. Place long fields and other areas in the starting part of the row.

Button

A button is a rectangular image object. After a button is clicked, a certain activity is triggered. However, we usually use the descriptive text related to the above activity to name the button. In most cases, a button is usually named "submitted" or "canceled ". The button generally follows the text flow and can be rolled along with the page. Ideally, the buttons should be designed and placed in a consistent and compatible manner, which applies to specific pages and cross pages. The number of buttons that can be accommodated in the screen space is limited. Therefore, please be cautious about Button placement on the screen and avoid misuse. The button cannot submit any form offline unless the avantgo synchronization feature is in use.

Some events can be captured by custom event handles, while buttons are used to trigger these events. Custom Event handles usually work offline. As mentioned in the text field section above, the display range of buttons and text areas cannot exceed the screen width of the Pocket PC.

Table

Table display greatly improves the way users browse data. You can use the width attribute to set the size of a table in a window. Setting the pixel value in the width attribute is the best way to control the table size. In addition, Pocket Internet Explorer supports nested tables.

If the width attribute is omitted, the table is drawn according to the following rules:

• If the "fit to screen" option is selected, the table is automatically adjusted based on the screen width.
• If the "fit to screen" option is not selected, Pocket Internet Explorer uses a virtual screen of 640 x and draws a table in pixels.

Therefore, the width value should be omitted unless there are special requirements on the table or cell width. Tags support the align attribute. tags do not support this attribute.

Graphics and Images

Images and images can enhance the attractiveness of pages to users. However, in the application process, they should comply with the principle of little but fine, and should be used whenever possible to provide value-added for users.

To display images larger than the workspace, Pocket Internet Explorer follows the following rules:

• If the "fit to screen" option is disabled, Pocket Internet Explorer displays the Image Based on the settings in the tag, that is, the image is displayed according to the "height" and "width" attribute values or the original image size (if the "height" and "width" attributes are not set.
• If the "fit to screen" option is enabled:
  • When the image is smaller than the screen width, the image is displayed according to the settings in the tag.
  • When the image width is greater than the screen width, the image is adjusted according to the screen size, but the adjusted image size is no less than 1/2 of the original size.

Scaling usually reduces the image quality. Therefore, we recommend that you avoid image width that is greater than the minimum width of the browsing area.

Image details

It is wise to avoid using large and complex images, because the scaling operation may omit key information in the image. If the same information can be transmitted without using an image in a convenient way, it is best to stop using the image. If you must use a complex image, crop it to achieve the expected effect.

Image Color

Pocket Internet Explorer displays color images on a color monitor. On a grayscale or monochrome display device, Pocket Internet Explorer converts a color image to a black-and-white image. The original color design of the image directly affects the display of the image on the grayscale or monochrome device of the Pocket Internet Explorer. Images with high contrast and well-defined boundaries will be optimized.

Design Images

For mobile devices, the simplest and most representative way to use images is to create small bitmap images with their own styles, while saving screen space. Complex elements often make people feel messy. Therefore, we should use concise and bright lines and shapes to design images. The best results come from conciseness rather than confusion.

Replace text mark

Users may choose not to load images. Therefore, it is very important to place alternative texts that play a role in embedding images. Remember, what you need to do is to explain the Functions Represented by the image, rather than describe the image.

Image Map

Pocket Internet Explorer does not support image maps. Try to minimize the image size. In addition, images on the web page should be able to imply correct functions to users.

GIF Animation

Pocket Internet Explorer does not support GIF animation. Only the first frame of the GIF animation can be displayed to the user. The rest of the frames that constitute the animation will still be stored on the device and occupy valuable storage space.

General Principles, tips and skills

The following are some general principles on how to design for Pocket Internet Explorer.

Remember: the screen size of the Pocket PC is limited.

Minimize screen size when designing applications. Although vertical and horizontal scroll bars can be used, you should adjust the information to a page as much as possible.

The theoretical resolution of Pocket Internet Explorer is 240x320, but the actual available space cannot reach this range.

The screen resolution of all Pocket PCs is 240x320. However, the Pocket PC user interface defines areas that cannot be used by two browsers.

• Menu bar at the bottom of the screen
• Title bar at the top of the screen

The two columns occupy 26 pixels in the vertical resolution. Therefore, if you want to design a page that only occupies one screen for the Pocket PC, the page size cannot exceed 240x268. Once the page height exceeds 268 pixels, the vertical scroll bar will automatically appear and reduce the screen width to 229 pixels. In addition, you can close the address bar to provide an additional 23-pixel vertical space. However, because the page itself cannot determine the address bar status, the address bar height cannot be included.

In this case, if you use a horizontal space of 240 pixels, the horizontal scroll bar will also appear, because the Pocket Internet Explorer requires 11 pixels to display the existing vertical scroll bar.

If you design a page that does not require a horizontal scroll bar in some way, you can obtain an additional 11-pixel vertical space. The pixel range of each component in the Pocket Internet Explorer screen is displayed:

Pocket Internet Explorer screen size

Offline browsing: an important implementation solution for Pocket Internet Explorer

In mobile favorites (mobile favorites), hyperlinks are unavailable offline unless the link depth is set to greater than 1. Therefore, you should use as few remote hyperlinks as possible and only provide users with the most important information. The page should be designed to work normally when the link is disconnected. If the link depth is N, "download the selected page and all pages that can be reached through the n-layer link from the selected page ".

The page cannot be changed dynamically

Pocket Internet Explorer does not support DHTML. Therefore, all content on the page is static. You can use XML, XSL, JScript, and document. Write methods to dynamically update some pages.

The more complete the features, the better the performance.

Only those necessary features should be used. Multiple Functions will cause unnecessary overload of the device.

Use a GIF file to add Spaces

Sometimes, you may find it difficult to add the required number of spaces to the page. If this problem occurs, you can insert spaces between page elements using transparent images. First, create a 1x1 pixel transparent GIF file and embed it into the file by marking it. Then, use the "width" and "height" attributes to expand the image to the desired size.

One of the purposes of using the "delimiter" GIF file is to force the broken line after the title. For example, if the title of an article is followed by an attribute line, you may not want to add a precise space by marking or marking the title. In this case, you can force the line to be disconnected and insert some transparent pixels simply using the method mentioned above. Meanwhile, the image size is set to 240 pixels in width and 1 pixel in height.

Text in the image

By adding text to an image, you can easily display fonts not supported by the Pocket Internet Explorer HTML on the page, so as to decorate the page.

To place text in an image, you usually need to use a font designed for the computer screen. Currently, there are several excellent 1-bit fonts available. The verdana font is applicable to bitmap display of various resolutions. Therefore, it is ideal for mobile devices.

However, remember that no text in a bitmap can be indexed on the current search engine (such as AltaVista or Yahoo.

Use Office 2000 as a web creation tool

In four office applications (Access 2000, Excel 2000, PowerPoint 2000, and Word 2000), only PowerPoint 2000 checks the browser version before the display page. When the page is submitted, it notifies the user that the page may not be correctly displayed in the current browser. In most cases, simple documents generated by the preceding office program are correctly displayed, but a slight addition to some complex features can cause problems.

In short, it is best not to use Office 2000 to create a page for Internet Explorer.

Best Performance for e-commerce

Personalized page

Personalized content will have a huge impact on the way people use the web. Allowing users to add the required content from your web page to your page will greatly improve the interaction of the site. You may have provided similar functions on the web site. For example, add a list of securities and cities to the basic weather information. In addition, because offline content is stored in the user's desktop system, the cookie function must be supported.

To enable personalization in Pocket Internet Explorer to improve interactivity, you can add a dedicated Pocket Internet Explorer configuration to the provided content. But remember, users generally need two types of configuration: one for the Pocket PC and the other for the desktop computer.

Advertisement

Placing advertisements on Web pages has become a common practice. For some companies, advertising space has become the main source of revenue for web sites. However, because content on the site may be browsed offline in Pocket Internet Explorer, there is no way to help the web site owner accurately count the number of ad clicks.

Ad strips are often linked to the home pages of related companies. Generally, this method does not help users much, unless the link depth selected by the Pocket PC user during synchronization is greater than 1 and can be linked to other sites other than the site on the current page, otherwise, the homepage of the company cannot be browsed offline. Remember that the important part of the page should be the content that is valuable to the user, not the advertisement.

Header

The sight of Western readers is used to gradually move from the upper left corner of the screen to the lower right corner of the screen. Therefore, the most important information, such as the title or company logo, should be placed in the upper left corner of the screen; the relevant information and links should be placed at the bottom of the page.

In typical cases, the first few lines of the page contain information text about the company or content provider. This region should be effectively utilized in order to communicate with customers and establish a reliable reputation for the company. In addition, this area can contain small ads.

Set the form width to 240 pixels

As mentioned in the HTML Tag section, the maximum width of a Pocket Internet Explorer Page is 240 pixels.

ImageOrSuch form elements will not automatically contract because of the automatic window adjustment option selected for the Pocket Internet Explorer, and the content other than the screen width will not be displayed. For e-commerce customers, it is annoying that they do not scroll horizontally when entering credit card information or processing shopping cart information.

Design E-Commerce forms

The screen width must be 240 pixels in mind when designing the form. The input control should be placed on different rows to avoid unnecessary scrolling. Each domain should be limited to a small screen area. If you need to display the image of the product selected by the customer, the description text should be placed at the bottom of the image rather than at the back of the image.

Optimal Performance for information sites

In addition to the issues that need to be paid attention to when providing the best performance for e-commerce sites, you must pay attention to the following points when designing an information site:

Information sites should support offline browsing

Avoid using elements that do not support offline work, such as form fields, large bitmaps, GIF animations, or excessive advertisements. Many new information sites require brief feedback on specified articles. Offline users cannot use this function because they need to send information back to the server. However, Pocket PC supports sending email messages offline, so you can add mailto links to the page.

Focus on substantive content

Do Not Display links that are unlikely to be viewed by users of the Pocket Internet Explorer, such as video/audio links or slides of large images.

Use the content Table Page between links

Many new information sites create pages containing the article introduction, and point to the complete content of the article through a link at the bottom of the page named "Click here to read more information. This method is not very effective in the offline implementation solution for Pocket Internet Explorer. Most users do not change the link depth in Mobile favorites (mobile favorites. In fact, they keep the default value (0 ). In the future, when they try to read the article by clicking such a link, the "Page unavailable" error will occur. In addition, even if you want to read the entire article, it is difficult to determine the link depth that should be set during actual use.

To avoid this, you can create a brief introductory page that contains links to all articles. This method still requires the user to change the link depth to "1", but it makes the whole process clearer for the user. You can add a prompt on this page to inform the user of the link depth to be set in the synchronization options.

Write scripts

With the increasing importance of complex web applications, it is increasingly popular to write client scripts.

Pocket Internet Explorer supports client JavaScript 1.1 (ECMA-262 ). However, VBScript is not supported. By convention, Pocket Internet Explorer supports Internet Explorer 3.02 dom (Document Object Model ).

The following are some issues that need to be pointed out when writing scripts in Pocket Internet Explorer:

Script errors are disabled by default.

Syntax errors, missing objects, or other JScript errors in JScript are ignored in Pocket Internet Explorer. The script will be terminated without any prompt. Add the following registry key to enable error messages.

JScript in Pocket Internet Explorer is case insensitive

In Internet Explorer 4.0 and 5.0, JScript is case sensitive. You may want to know why the same script runs correctly on the Pocket Internet Explorer, but it causes an error on the Internet Explorer of a desktop computer, this is probably because scripts are not case sensitive when accessing object properties, methods, events, or collections. In this case, the author strongly recommends that JScript be case-sensitive during compiling, which ensures extensive compatibility and facilitates debugging.

No window. Open Function

Pocket Internet Explorer does not support multiple windows. The call to window. Open will end with failure and will not generate any response (if the script error is closed ).

　　Tag restrictions

Pocket Internet Explorer supports ActiveX controls and allows scripts to be written using corresponding methods and attributes. However, compared with a desktop computer, the following restrictions exist:

Controls cannot be installed online

Internet Explorer for desktop computers supports downloading and installing ActiveX controls. Pocket PC does not support this method. However, ActiveX controls that already exist on the Pocket PC can be referenced in the tag on the page.

ActiveX controls are not affected by the fit to screen option (automatically adjusted based on screen ).

Even if the fit to screen option has been selected and the ActiveX control itself has been adjusted based on the screen area, the control content size will not be adjusted accordingly. If you want to create ActiveX controls used on the web page of Pocket Internet Explorer, make sure that the client display area is within 240 pixels.

Java Applet not supported

Java Virtual Machine (Java Virtual Machine) does not exist on the Pocket PC. Therefore, Java applet is not supported.

Security

Pocket Internet Explorer supports all common security solutions:

• SSL 2.0, SSL 3.0, and server gate Cryptography (sGC ).
• Pocket Internet Explorer supports 40-bit secure passwords by default.
• NTLM authentication and plaintext authentication are supported.

XML support

One of the latest components of Pocket Internet Explorer is MSXML. dll, which is an Internet Explorer 5.0 component that can be used on a Pocket PC.

This component allows Pocket Internet Explorer to display XML in the standard XML syntax coloring view, which has been widely used on desktop computers. It also allows the use of XSL (Extended style sheet language) to display XML data in a more friendly way.

Difference between MSXML and Microsoft Internet Explorer 5

Microsoft XML for Pocket PC and Microsoft Internet Explorer 5 have almost identical functions. However, some features are not supported on the Pocket PC.

Backward compatibility with ie4 MSXML Dom is not provided

MSXML for Microsoft Internet Explorer 5 provides the ability to simulate xml dom in Microsoft Internet Explorer 4. To reduce memory requirements and Rom capacity, MSXML for Pocket PC does not include this function.

Data Binding is not supported.

Both the Pocket Internet Explorer and MSXML for Pocket PC do not support data binding. The support for data binding requires the support of complex HTML layout.

Be careful with CSS attributes

Remember that Pocket Internet Explorer does not support CSS. Carefully check the XSL transformations you have created and ensure that they do not contain CSS elements or attributes. Exercise caution when using the style attribute in HTML tags.

XML Parser Interface

You can also use Microsoft XML Parser for C ++ or visual basic applications.

How to Use xmldom in Embedded Viusal C ++

To access xmldom in the embedded Visual C ++ application, you can use the following statement to import msxmlm. dll of the Pocket PC emulator (Pocket PC simulator:

# Import </Windows CE tools/wce300/MS pocket PC/Emulation/palm300/Windows/msxmlm. dll> raw_interfaces_only Using namespace MSXML; Void _ stdcall _ com_issue_error (hresult hr) { // Error handling goes here }

The "raw_interfaces_only" attribute is very important. Without it, the "msxmlm. tlh" file will produce a large number of errors. This attribute is created only for the low-level interface description used in the C ++ application. To avoid connector errors, it is necessary to use the "com_issue_error ()" function.

Here is a small example of XML code:

Ixmldomdocumentptr ixmldoc; Ixmldomelementptr ixmlelm; Ixmldomnodelistptr ixmlchild; Ixmldomnodeptr ixmlitem; Short tempty; BSTR; Hresult hR = ixmldoc. createinstance (_ uuidof (domdocument )); If (! Failed (HR )) { Ixmldoc-> loadxml (L" Joe" L" Smith ", & Tempty ); Ixmldoc-> get_documentelement (& ixmlelm ); Ixmlelm-> get_childnodes (& ixmlchild ); Ixmlchild-> get_item (1, & ixmlitem ); Ixmlitem-> get_xml (& BSTR ); MessageBox (null, BSTR, text ("caption"), mb_ OK ); }

How to Use xmldom in Embedded Visual Basic

Using xmldom in Visual Basic is very simple. The following code snippet shows how to parse XML in Embedded Visual Basic:

Dim xmldoc Dim currnode Dim XML Set xmldoc = Createobject ("Microsoft. xmldom ") Xml =" Joe" Xml = xml &" Smith" Xmldoc. loadxml (XML) Set currnode = xmldoc.doc umentelement. childnodes. Item (1) Msgbox currnode. xml

The following content is displayed in the message box:

　　 Smith

　　How to Use xmldom in Javascript

You can even access xmldom through the client JavaScript 1.1. The same code written using JScript is as follows:

Summary

Pocket Internet Explorer is a powerful web browser that provides almost all the functions available to today's web browsers. If you spend some time optimizing Pocket Internet Explorer during the page design process, all current customers will become your internet audience.

XML becomes increasingly important on the web. XML support built on Pocket Internet Explorer is a major feature of Pocket Internet Explorer. By using JScript with the client, you can create powerful web applications to make full use of the mobile Pocket PC.

[HKEY_CURRENT_USER/software/Microsoft/Internet Explorer/main]
"Showscripterrors" = DWORD: 00000001