What is the best way to create a simple mobile version of a website?

I am creating a small website for the company and would like to create a version optimized for smartphones with full Internet browsers (iPhone / Android, etc.).

I am inclined towards media queries because it is supported by webkit, which apparently most of them use.

This is the best? If so, which media query will be the best?

I tend to:

@media (max-device-width: 480px) 
+4
source share
3 answers

If your site can customize everything you need with CSS, you should be fine.

Keep in mind things that differ on the mobile network:

  • Overall width / height is much smaller
  • Font size usually increases for readability
  • Flash is not supported on many devices (cough iphone)
  • Drop everything that is not needed, do not waste traffic on what users of mobile users do not like.
  • add mobile attributes to the phone # for dialing convenience

However, as soon as you enter it, you will find that you really need / need to provide another "view" for mobile users ... for example. redirecting them from example.com to m.example.com and drastically changing the content on the page. If you use the MVC , you should be able to create a set of simplified views for your mobile-optimized pages.

Examples of sites (from desktop to mobile or from touch)

+2
source

For iPhone and Android, I wouldn’t worry, because they both have full-featured web browsers. (If the site does not have Flash, only the iPhone.)

You can target any device using a special CSS file, such as Blackberry, etc.

0
source

For touch phones, create jQTouch . For keyboard phones, simply create a style sheet optimized for small screens.

0
source

Source: https://habr.com/ru/post/1302496/


All Articles