Connecting the mobile version of the site
The development of the mobile version of the site can be approached in different ways: create a separate style or completely redesign the design and html markup. But in both cases it is important to determine when to download the mobile version of the site, and when - the computer version. This can be done in several ways.
Based on the analysis of information about the browser (User-agent string) sent to the server in the http request, either connect the style for the mobile version or redirect the user to the domain name corresponding to the mobile version of the site.
In the case where the mobile version is located on a separate domain name, you can use the meta.txt file. It contains entry points for mobile and computer versions.
')
Example of a meta.txt file for example.com (the file address in this case is example.com/meta.txt ):
Entry points for computer and mobile versions are defined in the pc and mobile lines, respectively.
Minuses:
a) specify the media attribute
The value of “screen” corresponds to an ordinary computer, “handheld” is a mobile device.
Minuses:
b) Use queries inside the media attribute
Most often styles are loaded depending on the width of the device:
In general, using such queries, you can determine a lot of things: the width and height of the browser window or device, orientation (portrait or landscape), resolution, etc.
Minus: not supported by many old devices.
c) Combining methods
Since both of the above methods are not supported by a number of devices, smart people have come up with a combination of them:
You can give the choice to the user and do not define anything, but simply make a link to the mobile version of the site.
If the mobile version of the site differs from the computer only in styles, then all the above options are suitable. If the html markup for the mobile version is different from the computer one, then method 2 is not a solution.
This post is based on the article: How To Build A Mobile Website
media queries - W3C recommendations for using media queries
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - an article about media queries in mobile layout.
metaTXT: A Standard for Improving Mobile Web Browsing - detailed information on using meta.txt
User Agent - A wiki article about User Agent.
1. Server side
Based on the analysis of information about the browser (User-agent string) sent to the server in the http request, either connect the style for the mobile version or redirect the user to the domain name corresponding to the mobile version of the site.
In the case where the mobile version is located on a separate domain name, you can use the meta.txt file. It contains entry points for mobile and computer versions.
')
Example of a meta.txt file for example.com (the file address in this case is example.com/meta.txt ):
name: example.com description: example.com is a widely used example website keywords: example, demo, demonstration pc: http://www.example.com mobile: http://m.example.com rss: http: //rss.example.com/rss/topstories.xml rss: http: //rss.example.com/rss/politics.xml podcast: http://rss.example.com/podcasting/news.xml video: http://rss.example.com/rss/tutorial.xml longitude: 12.3456789 latitude: 98.7654321 region: MM
Entry points for computer and mobile versions are defined in the pc and mobile lines, respectively.
Minuses:
- New browsers appear very often, respectively, will have to constantly replenish the list UserAgent;
- far not always UserAgent is defined correctly.
2. Client side
a) specify the media attribute
< link rel ="stylesheet" href ="site.css" media ="screen" /> <br> < link rel ="stylesheet" href ="mobile.css" media ="handheld" />The value of “screen” corresponds to an ordinary computer, “handheld” is a mobile device.
Minuses:
- sometimes both style files are loaded (both screen and handheld);
- not supported by many modern devices.
b) Use queries inside the media attribute
Most often styles are loaded depending on the width of the device:
< link rel = "stylesheet" href = "mobile.css" media = "only screen and (max-device width:480px)" />
In general, using such queries, you can determine a lot of things: the width and height of the browser window or device, orientation (portrait or landscape), resolution, etc.
Minus: not supported by many old devices.
c) Combining methods
Since both of the above methods are not supported by a number of devices, smart people have come up with a combination of them:
< link rel = "stylesheet" href ="handheld.css" media ="handheld,only screen and (max-device-width:480px)" />
3. User choice
You can give the choice to the user and do not define anything, but simply make a link to the mobile version of the site.
Conclusion
If the mobile version of the site differs from the computer only in styles, then all the above options are suitable. If the html markup for the mobile version is different from the computer one, then method 2 is not a solution.
This post is based on the article: How To Build A Mobile Website
Useful materials on the topic
media queries - W3C recommendations for using media queries
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - an article about media queries in mobile layout.
metaTXT: A Standard for Improving Mobile Web Browsing - detailed information on using meta.txt
User Agent - A wiki article about User Agent.
Source: https://habr.com/ru/post/113910/
All Articles