3 troubleshooting technologies that can be used instead of dynamic delivery
Google introduces three methods that can be used in place of dynamic distribution, assuming that cases where some kind of problem occurs when introducing dynamic delivery, such as support for smartphone of the site.
3 techniques to replace dynamic delivery
Dynamic delivery is a method of distributing different HTML for each device on the same URL. For example, smaho-compatible content will be delivered to smartphones, and content intended for PCs to PCs separately on the same URL.
However, there are not many cases where the site introducing dynamic delivery causes some problems, says Pierre Fur of Google.
Mr. Fur introduces the following three alternative techniques that can show different contents without using dynamic distribution.
However, there are also many who are not familiar with 2 and 3. I would like to add some commentary in the next section.
CSS: Media Query Function
By using the media query function adopted in CSS 3, you can introduce responsive design that switches CSS styles to be applied according to the screen size and resolution of the accessing user agent.
Traditionally, styles could only be separated by major distinctions, such as for browsers (media = "screen") and for printing (media = "print").
However, with media queries,
- For browsers with a width of 414px or less:
Media = "only screen and (max-width: 414px);" - In the case of a horizontally long browser with a width of 800px or more:
Media = "only screen and (min-width: 800px) and (orientation: landscape);"
You can realize flexible CSS style usage such as.
Currently, it is also possible to obtain various sample codes.
Currently, it is also possible to obtain various sample codes.
Image: <picture> element, srcset attribute
The <img> element and the src attribute do not have the same function as the CSS media query, but by using the <picture> element and the srcset attribute instead, you can distribute images by environment such as screen size.
Retina display and other high resolution environment with different pixel density can be handled conveniently, so the reference information and sample code are getting better and faster.
For example,
- In the environment where the display width is 320 px or less and the resolution is x 1, it is photo_ 320 _ 1 x.png
- In the environment where the display width is 320 px or less and the resolution is x 2, it is photo_ 320 _ 2 x.png
- In the environment where the display width is greater than 320px but less than 640px and the resolution is x1, photo_640_1x.png
- In the environment where the display width is greater than 320px but less than 640px and the resolution is x2, photo_640_2x.png
- In other environments photo.jpg
To distribute, please describe as follows.
<Picture>
<Source
Media = "(min-width: 320px)"
Srcset = "photo_320_1x.png 1x, photo_320_2x.png 2x">
<Source
Media = "(min-width: 640px)"
Srcset = "photo_640 _ 1 x.png 1 x, photo _ 640 _ 2 x. Png 2 x">
<Img src = "photo.jpg" alt = "Photo">
</ Picture>
<Picture>
<Source
Media = "(min-width: 320px)"
Srcset = "photo_320_1x.png 1x, photo_320_2x.png 2x">
<Source
Media = "(min-width: 640px)"
Srcset = "photo_640 _ 1 x.png 1 x, photo _ 640 _ 2 x. Png 2 x">
<Img src = "photo.jpg" alt = "Photo">
</ Picture>
Though there are browsers not compatible, Mr. Fur urges use as "It becomes a very powerful function for recent browsers".
No comments:
Post a Comment