Как исправить размеры, когда я разработал свой веб-сайт с настройкой отображения «больше места» на macbook retina

с чем конкретно у вас проблемы?

Шрифты не должны быть проблемой, и вы должны использовать SVG для своих иконок.

Единственная реальная серая область — это изображения, но если вы используете что-то вроде picturefill, на данный момент этого должно быть достаточно.

Кроме того, я думаю, вы должны предоставить это чтение.

Вы можете попробовать @media.

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

@media only screen and (-webkit-min-device-pixel-ratio : 3) {
    .style-of-element {
        background: url();
        font-size 24px;
    }
}

Если говорить только об изображениях, вы можете увидеть HTML5-тег <picture>. Ссылка
Там же можно проверить соотношение пикселей и поставить разные изображения в зависимости от него. Именно так:

   <picture> 
        <source srcset="http://big.jpg" media="(min-width: 617px)">
        <source srcset="http://medium.jpg 1.25x, http://big.jpg 1.5x" media="(min-width: 419px)">
        <source srcset="http://medium.jpg 1.5x, http://big.jpg 2x" media="(min-width: 321px)">
        <source srcset="http://medium.jpg 2x, http://big.jpg 3x" media="(min-width: 222px)">
        <img alt="Alt" src="http://default.jpg">
   </picture>

Также я знаю одну хорошую презентацию о том, что такое Retina, но она на русском языке. Может быть, вы получите какое-то понимание от фотографий там? Ссылка

Разобрался с этим!

Оказывается, когда вы возвращаетесь к немасштабированным настройкам просмотра «по умолчанию», количество пикселей CSS также фактически уменьшается (примерно до 1100 или около того в полноэкранном режиме) и увеличивается до 1500 или около того в полноэкранном режиме на «большем пространстве». Поэтому, чтобы не масштабировать страницу, нам нужна версия CSS, в которой каждое значение px равно A для «больше места» и A/2 для «по умолчанию» (более или менее). Я думал сделать это вручную, но потом понял, что мне также придется сделать это для начальной загрузки (пройти и изменить каждое значение css px с A на A/2. Это не звучало весело.

Но потом вышел Bootstrap 4 и я узнал про модуль rem в css. Это означало бы, что если бы я прошел и изменил каждое значение px на связанное с ним значение rem, я мог бы сделать что-то вроде:

@media(min-width: 768px)
    html
        font-size 12px
@media(min-width: 1150px)
    html
        font-size 14px
@media(min-width: 1300px)
    html
        font-size 16px

И это именно то, что я сделал. Чтобы сделать это, мне нужно было написать скрипт для просмотра минимизированной строки начальной загрузки и изменения px на rem с базовым размером html 16:

import re

def toRem(match):
    return str(float(match.group(0))/16.0)

def main(string):
    splits = string.split('px')
    values = [re.sub('[0-9]+$', toRem, split) for split in splits]
    output = 'rem'.join(values)
    print output

Единственной проблемой с этим подходом было одно значение: 1px преобразуется в 0,0625rem, что, когда вы уменьшаете размер шрифта html, слишком мало для отображения, поэтому все ваши границы в 1px исчезают. Я исправил это, изменив каждое вхождение 0,0625rem на 1px, так как 1px всегда должен быть 1px.

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