Mobile Web development practices and web development practices

Mobile Web development practices and web development practices

The rapid development of mobile devices has brought great convenience to users. Users can easily access the Internet using Android, iPhone, and other mobile devices. Mobile devices have high requirements on the Performance of Web pages. The following describes some experiences of Mobile Web development.

Viewport

When you use an iPhone to access a website that is not optimized for mobile devices (preferably a website with a 960px width), you will find that the entire page can be displayed on the iPhone, but the page is reduced a lot and the font is very small. This is actually because Sarari treats itself as a 980px width by default, and the actual width of all iPhone (portrait screen) is 320px. In fact, almost all mobile devices have similar situations, for iPhone, see iPhone 5 Display Size and Web Design Tips. This involves the concept of Viewport.

Viewport is the visible area of the browser and the width of the browser. in PC, the problem is simple, and the width is as much as the width, but on mobile devices, the browser tries to display the entire page, so the Viewport value is inaccurate, for example, the Safari mentioned above gets the width of 980px from the iPhone (the browser can only get the width from the system), so the first thing we need to do is to use the actual width of the browser to parse the page, the Code is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

"Width = device-width" indicates the actual width of the browser, for example, 320px on the iPhone, and initial-scale = 1.0 indicates no scaling by default. For more information about Viewport, see Using the viewport meta tag to control layout on mobile browsers.

In addition, the device pixel is not equal to the CSS pixel. For example, if the user scales up the page by 300%, the CSS pixel is also amplified by 300%, but the device pixel will certainly not change. Many devices usually tell the browser a false resolution to ensure good browsing effect. For example, the resolution of iPhone 5s is 640x1136, but it tells the browser that its resolution is 320x568 (the website needs to add width = device-width, otherwise it is 980 width ), otherwise, browsing the page on the screen at 640x1136 must be nearsighted.

Responsive Design

Mobile devices have a variety of resolutions, which requires good display on all devices, and responsive design is a very good solution. BootStrap and other frameworks all claim to be mobile first. Of course, the disadvantage is that the file is relatively large. If the website is relatively simple, you can write it by percentage. For more responsive designs, see responsive design introduction.

Image precision

Currently, all new mobile phone configurations are relatively high. Most mobile phones have more than 1 pixel ratio (devicePixeRatio), 2 for iPhone Retina, and 3 for Nexus5. A screen with a high pixel ratio must have a high-definition image. For example, the portrait screen width of iPhone 5s is 320px, but only an image with a 640px width can be perfectly displayed. Our development experience is that the pictures are processed according to the iPhone 5S standard, that is, the pictures must be displayed in high definition on the iPhone 5S, and the pictures can be automatically processed on other Anroid devices. You can refer to: mobile Web -- CSS to replace images with the Retina screen

Performance problems

• Zepto. js

  JQuery is very powerful, but its size is relatively large. Even the 2.x compression version has 82KB. ZeptoJS is known as the mini version of jQuery and is compatible with most jQuery APIs. Its size is only 24 KB, because it only supports mobile browsers and is small in size and fast.

• Lazy load

  For mobile Web pages, the actual traffic consumption part should be the image part. Because the images are usually relatively large, we can use Lazy Load to Load only the images on the current screen, because most users just jump to the next page by looking at the content on the current screen, there is no need to load all the images at a time.

• Others

  To improve performance and reduce download traffic, we can compress and merge CSS and JS files, compress images, and merge icons.

HTML5 & CSS3

Browsers on mobile devices are relatively new browsers, basically supporting new features of HMTL5 and CSS3, so we should use them more. At least we can use the Corner Effect of CSS3 to replace the image. The following lists some very useful CSS3 features.

• Rem

  CSS uses px AND pt as the font unit, but their disadvantage is that they are absolute values, percentages (%) and em are large and small as the font unit, their values are determined by the font size of their parent elements. The advantage is that their values change dynamically. The disadvantage is that the font size of each element's parent element is different, therefore, the size of each em is different, which leads to unified font size setting.

  Compared with the percentage and em, rem is relative to the font size of the root element rather than the parent element, so that the reference unit is the same when any element uses rem as the unit. In this way, we can uniformly control the font size of the entire page.

  Refer to: CSS 3 REM to set the font size

• Animation

  We usually use JS to implement animations, such as jQuery's animation (). However, JS performance is much inferior to that of native CSS3 animations, so CSS 3 is used to implement animations implemented with CSS3.

References

• Responsive Design
• CSS 3 REM sets the font size
• CSS 3 REM sets the font size

Mobile Web development problems

1. Open Tools> Options in VS2005.

2. Expand Projects & Solutions

3. Click General.

4. Modify the corresponding project template or item template location, which can be a network initiator.

The process of creating a template is quite simple.

1. Create a predefined Template

2. Make changes, such as adding pages and classes.

3. Save the project

4. click File> Export Template.

5. Follow the Wizard to complete the creation.

In what situations should I develop a mobile Web application?

Mobile web is the only platform for developers to publish mobile applications. It effectively connects various mobile interactions with desktop tasks. The mobile web platform has the following advantages: easy to learn, low development cost, standardization, easy to use, and easy to publish. I sum up these advantages to the principle of "ubiquitous": often something that is simple to develop and has a broad market can be successful. "High Quality" is also one of the key factors for success, and mobile web has not done well over the years. Mobile web still has some difficulties in many aspects. Solving the diversity of devices is a major challenge to increase the quality of mobile web. However, the difficulties faced by mobile web are far less complex than those faced by mobile app s. In addition, these challenges will be effectively solved over the past few years. As we all know, I am a supporter of mobile web; however, I am also the first person to acknowledge the importance of mobile applications. Developing a mobile app can make full use of the features of the device, which is often impossible for web browsers. Therefore, mobile apps are the best choice for a product. The following sections will discuss some of the main features of mobile apps. When should I develop a mobile app to charge for the app? There is no place to stipulate that the developer cannot charge a usage fee for a mobile web app, but for some reason, people often think that a mobile web application cannot or shouldn't be charged. Due to historical reasons, the payment service on mobile devices suffers from two major obstacles: payment methods are troublesome to enter a credit card number on mobile devices, and there is no security guarantee on many old-fashioned devices. A typical method is that if you need to pay for your application, you can reach an agreement with the carrier to allow the operator to charge for your service on its behalf. This also means that you need to cooperate with multiple carriers. This is usually the preferred method, because many mobile phone users may not have a credit card at all, such as teenagers. Another method is to save your credit card information on a secure website. You can log on to the website to purchase the application service. This process is not ideal, because it means users cannot buy services directly from their mobile devices. A commission is required to be forcibly divided into mobile operators. Apps Are released through carriers or mobile devices. They provide a charging mechanism for applications. These operators and mobile devices will extract part of the revenue and then hand over the rest to application developers, which also means that developers must abide by their market rules. It is usually very difficult to adapt to the operator's market rules and requires a large amount of human resources. In comparison, the market rules for mobile devices are much simpler, but there are also many difficulties. Applications and Services that impede the interests of operators and mobile device developers will be blocked. In the past, websites that do not rely on operators and mobile device developers could not escape the fate of being shut down if their incomes were too conspicuous. However, such things have rarely happened recently. If you want to charge for your mobile apps, you must accept this reality-you must abide by the market rules of others and give up some benefits. If you want to develop a mobile game (mobile games are the largest in the mobile market), you need to develop a mobile application. Games occupy a large amount of resources and require many device APIs or platform APIs. Although several games fully developed using web technology have a certain market share, it is still insignificant compared with the mobile application market. Game users have high requirements on the visual and operational effects of applications. Although mobile web provides some simulation experience, it is far from satisfying users' needs. When developing mobile games, you need to carefully consider which platforms your applications need to support. Fortunately, there are many tools that can help you push your game to multiple platforms, but it still takes a lot of manpower and material resources to complete the work. The next feature of the positioning function is the positioning function. You can use GPS or signal detection to determine your current location information. In the past, users can only view their location information through the APIs of the mobile app. However, most mainstream mobile browsers have embedded W3C Geolocation API. WebKit-installed devices such as iPhone and Android, or devices configured with Opera or Mozilla browsers, can obtain user location information. I believe that the positioning function will bring many benefits to Web technologies... the remaining full text>