How to develop mobile HTML5? What is the difference with PC end? -

Source: Internet
Author: User
How to develop mobile HTML5? What is the difference with PC end? How to develop mobile HTML5? What is the difference with PC end?

Reply content:

Thank you.
This is a big problem. I will give you a direction. You can check a lot of information on your own.
Consider the following:
1. The mobile end does not need to click 300 ms for confirmation, so do not listen to the click Event
2. The mobile network is generally slow. How can I reduce the page size and the number of requests and make good use of the cache?
3. The elements to be clicked on the Mobile End and Their interval cannot be too small. What is the finger area?
4. What are the performance of landscape and landscape screens?
5. Compatibility between different browsers (too many, such as position: fixed )?
6. Will the Retina screen be blurred?
7. Will the keyboard block the input content?
8. Click back in the browser?
9. What are the alternatives for cookie and localStorage in privacy mode of Some browsers (such as Safari?
...... Be sure to know about media queries
The Touch-friendly upstairs Vkki is right, but it's too deep for anyone who hasn't gotten started yet.
-----
In my opinion, it is very important to select a suitable framework and make people get started quickly. bootstrap is good, but in my experience, the performance in some situations is just as good, in some cases, they are not compatible with jquery plug-ins.
I personally recommend mui. Don't look like miui
Js and css developed by a company like hbuilder
I used an app for a website in the past few months. It performs well across platforms and is suitable for mobile h5 development.
The disadvantage is the performance and performance. When two webviews are stacked up, there will be a point card, and I am still very amateur ...... Write some common examples:
1. Use a smaller js library. For example, jQuery1.x-> jQuery2.x/zepto
2. Remember to use the meta-viewport label to adjust the view.
3. Handle touch events. Recommend a library, hammer
4. Be careful with the android host ...... In some cases, they may encounter strange bugs such as "one event can only bind One callback ......
5. Use websocket as much as possible. Mainstream models are supported.
6 debugging is very troublesome. For details, refer to this article: How to debug the web Front-end on the Mobile End? -Computer Network
7 position: fixed should not be used casually
8 flexbox is great. You don't have to use libraries like Bootstrap.
9. Why do I not prioritize canvas when playing games? There are no essential differences:

  • The screen size is small and has a wide range of specifications. It is required to improve the utilization of the view. Generally, streaming or responsive la s are used instead of fixed la S.

  • Applications of touch, device movement, and other events are greatly increased.

  • Browsers are generally more advanced and more advanced technologies can be used.

  • Considering the performance and network traffic of devices, you must strictly control the code quality and page loading time.

Related Articles:

Remove the white background and border of the input box from the HTML5 page on the Mobile End (compatible with Android and ios)

Mobile HTML5 Performance Optimization

Do users really need HTML5 apps on mobile terminals? What are the scenarios required?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.