Какую ширину экрана браузера я должен проектировать для поддержки Mac OS?
Большая часть статистики по браузеру показывает вам разрешение экрана.
Это хорошо для Windows, где браузеры обычно открывают полноэкранный режим, и большинство людей оставляют это так. Поэтому, если в статистике браузера указано 1024x768, вам просто нужно вычесть небольшую ширину для браузера Chrome.
Однако на Mac браузеры обычно не открывают полный экран.
Какой ширины может быть у браузера Mac, когда он открывается как таковой?
Я думаю о ширине 960, как рекомендовано на странице "что такое лучший абсолютная ширина для веб-страницы". Однако мне интересно, если это одинаково хорошая ширина для Mac?
Я не уверен, когда Apple последний раз делала ноутбуки или экраны 1280x768, так что это, вероятно, не проблема. Меня немного расстраивает то, что в большинстве мест, где я нахожу статистику по разрешению экрана, не отображается фактическая доступная ширина.
3 ответа
Придумай, мой друг. Дисплей Apple упаковывает много пикселей.
Окно откроется в полноэкранном режиме на Mac, нет проблем. Он просто экономит место, когда может, в отличие от поведения ПК, которое будет заполнять экран независимо от того, сколько места на самом деле нужно сайту.
Другими словами, случай, когда Mac не открывает окно в полноэкранном режиме, является случаем, когда у пользователя есть место, чтобы сэкономить. Так что это те случаи, о которых вам не нужно беспокоиться. Если браузер Mac OS должен перейти в полноэкранный режим, чтобы соответствовать сайту, он будет. Но когда сайт имеет размер всего 960 пикселей и у пользователя есть великолепный экран кинотеатра 2560x1600, он остановится на уровне 960, что достаточно для устранения горизонтальных полос прокрутки.
Причина, по которой люди замечают такое поведение, заключается в том, что дисплеи яблок часто бывают слишком большими, поэтому полноэкранный режим часто не нужен. Самый маленький дисплей Apple поставляется на любом ноутбуке - вместительный 1280x800. Самый маленький iMac уже 1680x1050. Они только становятся больше оттуда.
Что касается выбора ваших размеров, применяются нормальные соображения. Играйте в свой самый низкий общий знаменатель. Просто знайте, что разрешение экрана даже на скромном яблочном дисплее будет на уровне отраслевого стандарта. Если вы готовы перейти на 990 или 960 для ПК, это также будет приемлемо для Mac.
Большинство дизайнеров, с которыми я работаю, больше заботятся о том, чтобы сделать дизайн слишком узким для пользователей Apple. Они спроектированы в области 960 пикселей, так что это работает для большей аудитории, а затем они пытаются найти творческие способы проявить немного дополнительной любви к владельцам этого гигантского кинотеатра.
Sidenote: @Taylor Marshall задает хороший вопрос: "Что, если все ширины установлены на 100%? Насколько велика [окно браузера] становится..?"
Без каких-либо ограничений Firefox просто перейдет в полноэкранный режим, подобно поведению MS Windows. Safari будет расширяться до ширины 800 пикселей, если только ширина уже не превышает 800, в этом случае он поддерживает эту ширину и изменяет только высоту окна. Конечно, если нет никаких жестких значений ширины, тогда дизайн является жидким макетом, поэтому забота о проектировании для конкретной ширины несколько изменилась. Обычно хорошие схемы размещения жидкости, несмотря на то, что они отображаются правильно при любом измерении, тем не менее, предназначены для просмотра при разумной ширине окна.
Вместо того, чтобы беспокоиться об абсолютной ширине, почему бы не сделать проценты и дать ей минимальную ширину, чтобы она не выглядела слишком ужасно плохо при более низких разрешениях?
Минимальная ширина может быть там, где ваши 960 или 990 вступают в игру.
Статистика, которую вы прочитали, основана на реальных размерах экрана посетителей. Если вы ищете статистику о том, какого размера браузер среднего пользователя, вам нужно искать в другом месте. Кроме того, я никогда не просматриваю полноэкранный режим в Windows или Mac OS и считаю дизайн, который шире, чем 960px или около того, очень раздражающим. (это 2^16+2^17+2^18+2^19)
Мне повезло с размером браузера. Смотрите второй график.