What methods do you use when making up for large screens? If everything is clear with tablets and smartphones (@media), then how to deal with very large screens. For example, fullHD TV. Due to the fact that there is a large "grain", the text becomes difficult to read. At the same time on the monitor with the same resolution, everything looks great.

In other words, I want the page to look on an FHD TV as on an FHD tablet and not an FHD monitor.

    2 answers 2

    In CSS, it is not possible to use real units of measurement (cm, inches), only relative (css-pixels are also relative). Devices and browsers are responsible for determining the css-viewport so that the site looks at them readable. More about this is in my answer to the question " In what cases (and where) are these CSS units used - px, CSS px, dip? ".

    There is a problem with TVs - they inadequately determine the size of the viewport. For example, a FullHD TV defines a viewport as 1920 * 1080, although, taking into account the screen size and the average screen distance from the viewer, it must define a viewport in the region of 960 * 540, with a pixel density of two.

    The optimal size of the viewport can be calculated here . And here you can learn which dimensions of the device’s viewport are set according to the standard.

    Usually we trust the definition of the size of the viewport device, like this code in the <head> :

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

    But on problematic devices, you need to adjust the size of the viewport yourself. You can do this in js, like this:

     document.querySelector('meta[name=viewport]') .setAttribute('content', 'width='+width+ ',minimum-scale='+min_scale+ ',maximum-scale='+max_scale+ ',initial-scale='+init_scale);

    It remains only to teach the site to determine which device it is running on.

    For this there is a browser user-agent , and the width / height of the viewport defined by the device. Comparing them, you can try to "guess" what device in front of us, and adjust the size of the viewport.

    There is a plugin for modernizr - detectizr , designed to carry out these matches for you, and the output device, its model, browser and other characteristics. According to them, you can identify problem devices for your site, and adjust the viewport size for them, via js.

      Use <link rel="stylesheet" media="tv" href="example.css"> To determine the size, use em or% instead of px. Info W3 . Use the other css3 styles as usual.