IPhone Web development application (Part 1)

IPhone WebThe development of applications is the content to be introduced in this article.IPhoneIt is designed to prevent installation of any third-party applications from being cracked.) all third-party applications mustWebIn this case, let's look at the content first.

IPhone Web application Layout

UsedIPhoneFriends should know,IPhoneSome of the above applications can automatically adapt to the random rotation. That is to say, they will be displayed vertically when they are taken vertically, while those that are taken horizontally will be displayed horizontally,IPhoneOf course, the crucial Safari browser also supports this, so we consider designingIPhoneWhen using friendly applications, you must first consider compatibility. The page cannot be fixed to a single width.

Not long. Aren't we talking about designing our own applications? What does this have to do with the built-in Safari?IPhoneIt is designed to prevent installation of any third-party applications from being cracked.) all third-party applications mustWebAs small as a chess game, the application we are talking about now refersWebHowever, in the traditional sense, providing information is the coreWebWhat we are talking about is to provide interactive operations for applications.

Well, before we discuss the layout, let's take a look at the existingIPhoneApplication:

Facebook iPhone Edition

Facebook's iPhone version. If you are used to using Facebook on the iPhone, browsing this page on the PC for the first time will be frightened by its "fat. From this page, we can know that the method for automatically adapting the page to the iPhone screen is to use percentages to define the width, especially 100% for all pages, if there are four projects in the navigation bar side by side, each 25% is used.

AppMarks

AppMarks can be said to be a bookmarklet of an application. Of course, some people use it as the Safari homepage, which is equivalent to a desktop, because the apps you add to favorites are directly displayed on this page, with an uppercase icon. AppMarks can be viewed directly on the PC before, and now it has automatically redirected non-iPhone requests to the Introduction page, but here is an AppMarks Demo that can be viewed on the PC. We can see that the pictures are arranged in four rows in one row, with a total of 12 images. What happens to the landscape screen? Of course, if it is changed to six rows, it can still be displayed in one screen without any icons that are not satisfied with the rows. In fact, this is a very tricky practice, 12 is a public multiple of 4 and 6, so although the vertical screen and landscape screen display method is different, but you do not think there are any defects.

Newsgator Mobile iPhone Edition

Finally there is an ASP. NET writes the iPhone application. In fact, it looks similar to Facebook above and uses the 100%-width approach. At the same time, the elements on the page are either left-aligned or right-aligned. This sounds nonsense. In fact, even if you leave it blank in the middle, do not use the entire block area with a width of 100%. You can leave the descriptive text on the left, and put the operation and visual feedback on the right, in this way, the screen looks good no matter how it is rotated. If the content is full in the middle, it only allows Safari to scale down the entire page, which is not conducive to the operation.

GMail

Isn't it a normal GMail? How can I see the iPhone? Therefore, you need to modify the user-agent attribute to cheat it. The user-agent Used by Safari on the iPhone is as follows:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420 + (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Use Firefox's User Agent Switcher to modify the user-agent. Then you can see GMail on the iPhone. As with the above website, the clickable area is a large block with a width of 100%.

In fact, it is not difficult to design the iPhone friendly interface at the CSS level, or even very simple, because it is basically a block area with a width of 100%, in a few cases, block partitions are divided by percentages, but we should also avoid this situation. Why? Don't forget that iPhone users have no mouse. They must use their fingers to operate everything on the page. Therefore, the clickable area must be as large as possible.

Since they do not see the mouse pointer, you do not need to consider that the clicked area must be a link or cursor: pointer, because you cannot determine whether a region can be clicked by changing the mouse pointer. However, this also introduces another question. How can users know whether a region can be clicked? At this time, you must give clear visual cues, such as the text that looks like a link, and the blue text with or without underscores is often quite tempting. Facebook is an example. Another way is to make the interface look like a menu style, as shown in the examples marker and Newsgator. Isn't the symbol on the right of the menu quite familiar? As long as I click this menu item, the next level menu will be displayed. The last method is to prompt the user based on the original hint that the user is already familiar with. the user who is used to using GMail knows that clicking is an open email when he sees the big blue area of the mail title, this does not require any guidance. In the worst case, the user does not know what to click or will click the mail title, and then the user will use it.

IPhone Friendly Web application Viewport

After learning about some common layout methods of the iPhone, we can start to write a page that can really run on the iPhone. In a whisper, I said that I had to finish layout discussion and enter interactive logic development. Later I thought that I could not do it. If I did not talk about some things, it would cause layout problems, the layout is not elegant.

The first thing to say is the viewport, that is, the visible area. For desktop browsers, we all know what the viewport is, that is, the area used to view webpages after all the toolbar, Status Bar, and scroll bar are gone. This is a truly effective area. Regardless of the size of your screen, if you have enough toolbar, your viewport will eventually disappear .) In a desktop browser, the viewport size is directly related to the browser window size. When the window size is large, the viewport size naturally increases. As the viewport size changes, the page layout may also change. For example, the page width of width: 100% is always the same as the viewport width.

However, iPhone Safari does not understand the viewport in this way. It presents the Page Based on the viewport, And the viewport remains unchanged after the user scales the page, only that the page content is scaled proportionally. For example, if viewport is not set, the default value of viewport is 980 in pixels ), the layout displayed on the page is the same as that displayed when the desktop's short viewport width is 980. However, because the iPhone screen width is 320, It is scaled down proportionally. Therefore, an image with a width of 320 is displayed in the default viewport as follows:

As you can see, images are scaled down proportionally, which is good for traditional Web pages to be displayed directly on the iPhone, because if the traditional Web page is displayed normally in the 980-width desktop browser viewport, the display on the iPhone is absolutely normal. However, this is not a good thing for Web applications, because we need to design a page that will be displayed in 980 width in the future, an element that should be displayed as 320*80, it must be designed to be 980*245, which is too troublesome!
Therefore, we need to change the viewport to the following:

What should I do? We have several options, so let's see what attributes we can set first. We can operate on four attributes:

Width-width of viewport

Height-the height of viewport

Initial-scale-initial scaling ratio

Minimum-scale-minimum scale allowed by users

Maximum-scale-maximum scale allowed by users

User-scalable-whether the user can manually Scale

We can set one or more of these six attributes. The iPhone will automatically calculate other attribute values based on the attributes you set, rather than directly using the default values. This is very important. There is a default viewport when you do not set it at all. Other values are automatically calculated after you set an attribute, which is no longer the default value.

If you set initial-scale = 1, the width and height values are automatically set to 320*356, not 320*480, because the address bar occupies space ), the screen size is 480*208.

Similarly, if you only set the width, the initial-scale and height values are automatically calculated. For example, if you set width = 320, initial-scale is 1 when the screen is portrait, and 1.5 when the screen is landscape.

So how can we let Safari know about these settings? In fact, it is very simple, just a meta, like:

 
 

  
  
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
 
 

After initial-scale = 1 is set, we can finally design the page at a ratio. In the next step, we can officially enter the detailed design of the page layout. If you want to keep an eye on the iPhone, read the next article.

Summary: AboutIPhone WebThis article is helpful to you. If you want to continue to pay attention to itIPhone, Please continue to read the next article: iPhone Web development application ).