Есть ли способ отобразить веб-страницу 16: 9, растянутую более чем на 3 экрана, с правильным соотношением сторон текста и без заметной пикселизации? - PullRequest
Новая
       47

Есть ли способ отобразить веб-страницу 16: 9, растянутую более чем на 3 экрана, с правильным соотношением сторон текста и без заметной пикселизации?

0 голосов
/ 19 октября 2019

Фон

На коммерческих телевизорах есть режим, называемый режимом видеостены, в котором вы можете растянуть один рабочий стол на несколько экранов. Допустим, я работаю с 4 экранами, я пытаюсь создать веб-страницу, которая выглядит как не растянутая, что означает, что на обычном одном экране, показывающем один рабочий стол, он будет выглядеть как сжатый 4 раза.

В настоящее время у меня есть частичное решение: создать страницу шириной 4 на рабочем столе, а затем использовать CSS-форму для масштабирования страницы на 1/4 по горизонтали.

Хотя изображения размыты, это можно уменьшить, исключив преобразованиедля элементов с изображениями.

Проблема

Когда преобразование масштабирования выполнено, шрифты пикселируются, как если бы они прошли плохое (низкое качество) сжатие JPEG.

Ниже приведен мой пример кода. 

body {
    font-family: Helvetica, Arial, sans-serif;
    color: #333;
    display: flex;
    flex-flow: row;
    white-space: nowrap;
    overflow: hidden;
    min-width: min-content;
    animation: fadein 3s;
}

@keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.screen {
    display: grid;
    grid: 50% auto / 50% auto;
}
.main {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
}
.dynamic {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    float: left;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
.list {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.dynamic .item {
    position: relative;
    height: 100%;
    width: 49.8%;
}

.dynamic .item > div {
    position: relative;
    transform-origin: left;
}
.dynamic .item .name {
    display: block;
}
.dynamic .item .header > * {
    display: inline-flex;
}
.dynamic .item .values > * {
    display: inline-flex;
}



@media (min-aspect-ratio: 16/9) {
    body {
        font-size: 4vh;
        height: 100vh;
    }
    .screen {
        width: calc(8000vh/(9*5));
        height: 100vh;
    }
    .dynamic .text { font-size: 2vh }
    .dynamic .name > * { font-size: 4vh }
    .list { font-size: 2vh }
    .list .title { font-size: 4vh }
}

@media (aspect-ratio: 16/9) {
    body {
        flex-direction: row;
        width: calc(8000vh/9);
        height: 100vh;
        transform: scaleX(.25);
        transform-origin: top left;
    }
}
    <div class="screen">
        <div class="list">
            <div class="section">
                <div class="title text">Subsection 1</div>
                <div class="item">
                    <div class="text">Text 1</div>
                    <div class="text">Text 2</div>
                    <div class="text">Text 3</div>
                </div>
            </div>
            <div class="section">
                <div class="title text">Subsection 2</div>
                <div class="item">
                    <div class="text">Text 1</div>
                    <div class="text">Text 2</div>
                    <div class="text">Text 3</div>
                </div>
            </div>
        </div>
        <div class="main"></div>
        <div class="dynamic">
            <div class="item">
                <div class="name"><span class="text">Subsection 1</span></div>
                <div class="header">
                    <div class="text"><span>Header 1</span></div>
                    <div class="text"><span>Header 2</span></div>
                    <div class="text"><span>Header 3</span></div>
                    <div class="text"><span>Header 4</span></div>
                </div>
                <div class="values">
                    <div class="text"><span>Text 1</span></div>
                    <div class="text"><span>Text 2</span></div>
                    <div class="text"><span>Text 3</span></div>
                    <div class="text"><span>Text 4</span></div>
                </div>
            </div>
            <div class="item">
                <div class="name"><span class="text">Subsection 2</span></div>
                <div class="header">
                    <div class="text"><span>Header 1</span></div>
                    <div class="text"><span>Header 2</span></div>
                    <div class="text"><span>Header 3</span></div>
                    <div class="text"><span>Header 4</span></div>
                </div>
                <div class="values">
                    <div class="text"><span>Text 1</span></div>
                    <div class="text"><span>Text 2</span></div>
                    <div class="text"><span>Text 3</span></div>
                    <div class="text"><span>Text 4</span></div>
                </div>
            </div>
        </div>
    </div>

Что вызывает это, и есть ли способ обойти это, используя HTML / CSS?

Ответы [ 2 ]

1 голос
/ 19 октября 2019

Допустим, у вас был веб-сайт, созданный только для мобильных устройств, и вы хотели, чтобы он был хорош для настольных ПК, вы не использовали бы масштаб преобразования, верно? Просто не используйте преобразование для этого. Используйте медиа-запросы и соответственно корректируйте фактический размер элементов. Подобное масштабирование будет портить значения пикселей и вызывать эффект размытия.

Не имеет значения, насколько большой или маленький носитель, с которым вы работаете, принципы адаптивного дизайна работают одинаково. Используйте относительные единицы вместо абсолютных, и это не так сложно.

Если вы используете rem единицы для размеров шрифта, полей и отступов и т. Д., А также для высоты строк без единиц измерения, они относятся к корневому шрифту. -size (обычно по умолчанию 16px), поэтому, изменяя размер шрифта для элемента html, они будут масштабироваться пропорционально. Для общей структуры макета вы можете использовать проценты или, что еще лучше, использовать CSS-сетку и fr единиц .

Изображения потребуют немного больше работы, так как вы должны использовать различные изображения с определенностью. для разных размеров, но для всего остального это делает.

Демонстрация: 

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
}

p {
  margin-top: 0;
  margin-bottom: .75rem;
  font-size: 1rem;
  line-height: 1.5;
}

.main {
  display: grid;
  grid-template-rows: 7.5rem max-content 1fr;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  color: yellow;
}

.header__title {
  font-size: 2rem;
  line-height: 2.25;
  text-transform: uppercase;
}

.navbar {
  display:       flex;
  background:    lightblue;
  border-top:    0.125rem solid;
  border-bottom: 0.125rem solid;
}

.navbar__item {
  flex-grow: 1;
  padding: .375rem .75rem;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  color: black;
  font-size: 1.125rem;
  line-height: 1.5;
}

.content {
  background: silver;
  padding: 1.5rem;
}

.content__title {
  font-size: 1.125rem;
  line-height: 2.25;
  margin-top: 0;
  margin-bottom: .75rem;
}
<main class="main">
  
  <header class="header">
    <h1 class="header__title">Title</h1>
  </header>
  
  <nav class="navbar">
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
  </nav>
    
  <article class="content">
    <h2 class="content__title">Lorem Ipsum</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
  </article>
</main>

Достаточно просто, верно? Преобразование в rem - это, в основном, значение в пикселях, деленное на 16 (размер шрифта корня по умолчанию)Теперь, добавив только одну строку, мы можем масштабировать все: 

html { font-size: 32px; } /* added just that, doubling the scale (16*2 = 32) */

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
}

p {
  margin-top: 0;
  margin-bottom: .75rem;
  font-size: 1rem;
  line-height: 1.5;
}

.main {
  display: grid;
  grid-template-rows: 7.5rem max-content 1fr;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  color: yellow;
}

.header__title {
  font-size: 2rem;
  line-height: 2.25;
  text-transform: uppercase;
}

.navbar {
  display:       flex;
  background:    lightblue;
  border-top:    0.125rem solid;
  border-bottom: 0.125rem solid;
}

.navbar__item {
  flex-grow: 1;
  padding: .375rem .75rem;
  text-align: center;
  text-transform: capitalize;
  text-decoration: none;
  color: black;
  font-size: 1.125rem;
  line-height: 1.5;
}

.content {
  background: silver;
  padding: 1.5rem;
}

.content__title {
  font-size: 1.125rem;
  line-height: 2.25;
  margin-top: 0;
  margin-bottom: .75rem;
}
<main class="main">
  
  <header class="header">
    <h1 class="header__title">Title</h1>
  </header>
  
  <nav class="navbar">
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
    <a href="#" class="navbar__item">item</a>
  </nav>
    
  <article class="content">
    <h2 class="content__title">Lorem Ipsum</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
  </article>
</main>

Редактировать : Хорошо, я вижу это сейчас - после обсуждения комментариев. Если ваше оборудование выполняет масштабирование, а не браузер, я думаю, вам не повезло. Но вместо этого должна быть возможность настроить мониторы так, чтобы они расширяли друг друга по горизонтали, что сделало бы правильный холст 7680x1080, который вы могли бы обнаружить с помощью медиа-запроса с соотношением сторон 64: 9. Большинство ОС будет иметь эту опцию (исключая такие вещи, как Windows Starter). Ubuntu - это бесплатный вариант, который, например, есть в наличии. Я просто предположил, что это то, что вы имели, так как обычно это самый простой способ.

0 голосов
/ 24 октября 2019

Я обнаружил, что причина связана с сглаживанием ОС - поскольку я считаю, что нельзя изменять или принудительно сглаживать шрифты через браузер.

Так как я 'm в Windows, включение ClearType сглаживает текст настолько, чтобы его можно было прочитать.

...