Изменение размеров изображения посредством адресной строки браузера


Содержание

Изменение адресной строки браузера веб-браузера (хром) $(window).height(); создание фонового размера: масштабирование обложки каждый раз

Проблема в том, что у меня есть несколько DIV, расположенных абсолютно, у которых есть размер фона: обложка; и их высота вычисляется javascript для заполнения 100% окна просмотра. На каждом настольном браузере и мобильном firefox все в порядке, но на адресной строке мобильного Chrome (при появлении/исчезновении) изменяется $(windows).height(); стоимость. Это приводит к причудливому масштабированию фонового изображения каждый раз, когда он это делает. Есть ли временное решение, чтобы всегда отображать адресную строку (поэтому значение высоты окна не изменилось) или какое-либо другое решение в сохранении фонового размера: обложка; масштаб одинаковый независимо от адресной строки?

Я знаю, что вы говорите о Chrome, но в случае мобильного Safari, нового с ios 7.1, вы можете добавить этот атрибут в тег viewport «minimum-ui», и это предотвратит навигационную панель и адресную строку от входа и выхода.

Надеюсь, в будущем другие браузеры, такие как Mobile Chrome, также будут принимать это значение.

Я написал небольшой ванильный JS ES6 npm module, чтобы исправить проблему:

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

Это то, что делает script (упрощенный):

  • Когда пользователь начинает прокрутку, script сохраняет начальную высоту каждого элемента, имеющего определенный атрибут данных. (Данные скачкообразный затруднительная = ‘истина’)
  • Во время прокрутки пользователя и изменения размера окна просмотра script предотвращает изменение размера всех выбранных элементов, заставляя их вернуться к ним.

Источник скомпилирован для ES5 для поддержки старых браузеров.

Удобное изменение размеров окна браузера под стандартные разрешения экрана

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

Сам себе удивляюсь — почему это я ранее не озадачился поиском простого, удобного и быстрого способа изменения окна браузеров (Opera, FireFox, IE), используемых при тестировании, несмотря на то, что верстаю уже достаточно продолжительный отрезок времени.

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

Способ для браузеров FireFox и Internet Explorer

Суть методики максимально проста — в браузере нужно создать закладку, в которой прописать специальный код ява-скрипта. То есть:

  1. Создаем закладку для какой-либо страницы (любой).
  2. Редактируем ее, вместо адреса страницы указываем нижеследующий JavaScript, а вместо названия соответствующее разрешение, например 1024×768.
  3. Аналогично создаем закладки под другие разрешения экрана.

Дальше остается только организовать наиболее удобный доступ к созданным закладкам. В FireFox, например, их можно вынести на «Панель закладок».

Способ для браузера Opera

По идее, метод, обозначенный выше для FF и IE, в Опере тоже работает, но только в случае, если окно браузера не максимизировано. Взамен этого неудобства есть более интересный способ.

По умолчанию в Опере задействована клавиша «5», которая выполняет функцию «Развернуть/Восстановить окно», поэтому нам остается только изменить ее действие в настройках клавиатуры на следующее:

Здесь параметр screen.availHeight-70 означает, что из полной высоты страницы нужно вычесть 70 пикселей. Для меня такой вариант представления окна показался немного неудобным, поскольку мне нужно видеть его нижний край, поэтому я задал фиксированную высоту. Получилось следующее:

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

В качестве альтернативы можно воспользоваться еще одним вариантом, в виде готовых кнопок для Opera (размещаете в любое удобное для Вас место на панели браузера):

Компания «Expert Systems», имея большой опыт в сфере создания профессионального программного обеспечения, разрабатывает CRM-системы для ведения клиентской базы. Для тестирования возможностей программы можно попробовать бесплатную версию CRM-системы «Quick Sales 2 Free».

Как при изменении размеров окна браузера запретить менять масштабирование элементов

Как при изменении размеров окна браузера сделать так, чтобы та сайт вообще не менялся, т.е. та часть, которая окажется за пределами окна, просто не была видна. Например, у сайта vk.com, да и у большинства, так делается.

я не о фиксированной и резиновой верстке. пример того, что я хотела https://pp.vk.me/c631422/v631422331/30b35/ee0Ehvv26_E.jpg

2 ответа 2


Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width . В случае с Яндекс это min-width: 936px; . Вот пример их CSS:

Ниже приведен полный пример требуемой вами верстки:

Вот такой meta тег запретит мобильным устройствам масштабировать страницу:

А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай — сочетание Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

Ключевое слово здесь user-scalable=no

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.14.35452

Изменить значок изображения в адресной строке браузера

Я просмотрел многие сайты, но мне не удалось получить ответ.

Вопрос: Я хочу изменить значок в соответствии с приведенным ниже изображением в моем браузере.

browser image icons

4 ответа

2 Решение [2013-07-29 19:13:00]

В настоящее время chrome и Mozilla не поддерживают эту функцию, если вы хотите проверить, можете ли вы проверить ее или в том или в сафари, она покажет, где вы хотите.

вы должны добавить этот тег в голову

это инструмент, который поможет вам создавать иконки с помощью конвертера http://www.favicongenerator.com/

Этот значок обозначает «значок». Чтобы создать что-то подобное, перейдите к ЭТОЙ ССЫЛКЕ, Загрузите изображение и получите файл favicon.ico, а затем поставьте его рядом со своей страницей шаблона на своем хосте.

Чтобы получить дополнительную информацию, перейдите ЗДЕСЬ.

1 rutter [2013-07-27 08:29:00]

Они называются «favicons», и вы можете установить их для своего сайта, используя специальный тег в HEAD вашего HTML. Вы можете найти много учебников по этому вопросу в Google Googling (теперь, когда вы знаете, что они называли).

Адресную строку браузера превратили в хостинг сайтов

Вице-президент по дизайну компании Dropbox создал сервис itty.bitty.site, позволяющий создавать сайты, весь код которых хранится в их URL, сообщает The Verge. Он поддерживает как простой текст, так и HTML-код, который сжимается и помещается в URL. Когда пользователь переходит по такой ссылке, информация из адреса обратно преобразуется в код и отображается на экране.

Единый указатель ресурса (URL) нужен для обозначения местонахождения страницы в интернете, но помимо самого адреса он может содержать в себе и дополнительную информацию, в том числе якорь или идентификатор фрагмента. Он обозначается символом #, а его обработка происходит локально в самом браузере. Как правило, якорь используют для того, чтобы сослаться на конкретную часть страницы, например, чтобы после открытия большой статьи пользователь сразу увидел конкретный абзац.

Николас Житкоф (Nicholas Jitkoff) из Dropbox использовал этот элемент для того, чтобы хранить сайты непосредственно в их адресе. Создаваемые таким образом сайты имеют адрес https://itty.bitty.site/#Name/SITE_DATA, в котором после якоря располагается заголовок страницы, а затем и сам код страницы. При этом, поскольку символы после # обрабатываются самим браузером и не требуют запросов к сайту, на самом itty.bitty.site не хранятся данные создаваемых пользователями страниц.

Для создания собственных страниц на сайте есть простой редактор. Он поддерживает как простой текст, так и HTML. Кроме того, пользователь может создать простой сайт с HTML, CSS и JavaScript на сервисе Codepen.io и загрузить его в редактор. В качестве примера разработчик показал работающий калькулятор, созданный таким способом.


После того, как пользователь создал в редакторе свою страницу, сервис сначала сжимает данные с помощью алгоритма сжатия без потерь LZMA, преобразует сжатые данные в Base64-запись и размещает эти данные в URL. После этого ссылку можно скопировать или преобразовать в QR-код и сосканировать с помощью смартфона. Когда пользователь открывает такую ссылку, его браузер сначала загружает сам сайт, а затем преобразует данные после # в код и отображает страницу на экране.

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

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

Трюк с единицами вьюпорта на мобильных устройствах

Перевод статьи The trick to viewport units on mobile, by Louis Hoebregts

Единицы вьюпорта всегда были спорными, в частности из-за того, что мобильные браузеры имеют свое собственное мнение о том, как их реализовывать.

Например, следует ли учитывать полосу прокрутки для vw -единиц? Как насчет навигации по сайту или элементов управления страницами? Еще есть физические атрибуты самих устройств (привет, notch!), которые нельзя упускать из виду.

Немного контекста

Спецификация довольно расплывчато объясняет, как должны рассчитываться единицы вьюпорта. На мобильных устройствах мы в основном имеем дело с высотой, поэтому давайте разберемся с проблемой на примере высоты области просмотра (viewport height, vh ):

vh unit
Равна 1% от высоты исходного блока контента.

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

vh изначально рассчитывается по текущей высоте вьюпорта вашего браузера. Когда вы открываете браузер и начинаете загружать на сайт, 1vh = 1% от высоты экрана, минус интерфейс.

Но если вы начинаете прокрутку, все меняется. Как только скроется адресная строка, значение vh обновится, и контент страницы некрасиво «прыгнет».

Safari для iOS был одним из первых мобильных браузеров, который обновил свою реализацию, установив фиксированное значение для vh на основе максимальной высоты экрана. При этом не будет испытывать прыжков при скрытии адресной строки. Мобильный Chrome последовал этому примеру около года назад.

Цукерберг рекомендует:  Вакансии ОАО Original Group

Хотя фиксированное значение удобно, у него есть и минусы. Если адресная строка находится в поле зрения, нижняя часть блока со значением высоты 100vh будет обрезана.

Элемент обрезается внизу (слева), но нам бы хотелось получить полный вид (справа)

Трюк с пользовательскими свойствами CSS

Пользовательские свойства CSS и несколько строк JavaScript могут стать идеальным способом получить согласованный и правильный размер вьюпорта.

В JavaScript всегда можно получить значение текущего окна просмотра с помощью window.innerHeight , которое учитывает интерфейс браузера и обновляется при изменении области видимости. Хитрость заключается в том, чтобы сохранить это значение в CSS-переменной и применить его к элементу вместо единицы vh .

Назовем переменную —vh. Применить ее можно следующим образом:

Сложности современного масштабирования, часть 4

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

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

В то же время подавляющая часть современных пользователей достаточно много времени проводит в интернете, работая и развлекаясь на самых разных веб-сайтах. Проблема в том, что большинство интернет-сайтов тоже создавались исходя из представлений о том, что 96 DPI — неизменная величина. И у их разработчиков было еще меньше стимулов (а чаще — вообще никаких) отдельно продумывать оптимизацию под разный DPI/PPI. Подчеркну, речь идет именно об изменении DPI, а не об адаптации под разное разрешение традиционных мониторов. Следовательно, проблему масштабирования под мониторы с большим PPI для получения комфортного размера шрифтов и элементов интерфейса должны решать браузеры. Вот и посмотрим, как они это делают.

Сайты

Если отбросить экстремальные решения, то большинство сайтов (речь идет о традиционных сайтах с текстовым контентом, а не мультимедийных) делятся, грубо говоря, на две большие категории:

  • сайты с фиксированной шириной основной колонки (которая выравнивается по центру или по левому краю, оставляя остальное пространство экрана пустым) и
  • сайты с адаптивной шириной, которые растягиваются на всю ширину экрана (или окна браузера).

С первым случаем всё просто и понятно. Во втором случае колонки либо делят пространство в какой-то пропорции, либо вспомогательные колонки (меню, навигация и пр.) имеют фиксированную ширину (или какой-то диапазон в зависимости от ширины экрана), а наиболее информационно насыщенная центральная — переменную.

Собственно, за примерами далеко ходить не надо. Типичная иллюстрация первого подхода — разметка статьи на нашем сайте (статьи на iXBT.com имеют центральную колонку шириной 700 пикселей), пример второго — наш форум, forum.ixbt.com. Он имеет дизайн в три колонки, который используется на большинстве современных форумов. Левая колонка содержит информацию о пользователях и вспомогательные данные (она имеет определенный диапазон ширины), центральная (она растягивается на всю доступную площадь) содержит, собственно, посты, а правая — навигация и т. д. Чем шире экран, тем шире будет центральная колонка, т. к. она самая информационно насыщенная. Левая и правая колонки могут чуть расширяться и сужаться, но примерно сохраняют свою ширину. Правильно? Вроде да.


На сегодняшний день практически все сайты выполнены и оптимизированы под фиксированный DPI = 96 и хорошо показываются только в том случае, если PPI монитора примерно соответствует этому параметру. Если радикально увеличить PPI без изменения диагонали, то видимые размеры всех элементов (букв, картинок, кнопок и пр.) существенно уменьшатся. И чтобы сделать их читаемыми, приходится увеличивать масштаб в браузере.

Браузеры

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

Тем более что еще при тестировании Acer Aspire S7 стало понятно: то, насколько к масштабированию готов сам браузер, имеет очень большое значение при работе.

Так, при отсутствии поддержки масштабирования даже элементы интерфейса становятся слишком мелкими: неудобно читать мелкие шрифты, неудобно работать и даже кликать мышкой, не говоря уж об использовании пальца. Поэтому на Aspire S7, например, моим любимым браузером стал IE10… Впрочем, это мы забегаем вперед.

Кроме того, надо понимать, как именно и что он масштабирует.

Помимо формального зачета был и неформальный: мы просто игрались с настройками масштабирования сайтов, чтобы точнее понять, как и что работает. Итак, приступим.

Для теста мы взяли четыре популярных браузера:

  • Internet Explorer 10
  • Opera 12.15
  • Google Chrome 26.0.1410.64m (последняя версия на момент тестирования)
  • Mozilla Firefox 20.0.1

Все остальные слишком уж малораспространены и, как правило, используют движки вышеуказанных браузеров (хотя что там этих движков осталось: Opera, например, перешла на Webkit, оставив разработку Presto; правда, Chrome перешел на собственный движок Blink, но это пока только ответвление того же Webkit).

Далее мы посмотрели на поведение браузеров при следующих системных параметрах:

  • 96 DPI
  • 120 DPI (125%)
  • 120 DPI с отключенным XP Scaling
  • 144 DPI (150%)
  • 144 DPI с отключенным XP Scaling
  • 133% (свободное масштабирование)

Для каждой из вышеуказанных настроек снималось два скриншота: при масштабе интернет-страницы 100% и масштабе 150%. Тестовая система осталась та же: Lenovo Yoga 13 с экраном 13,3 дюйма и разрешением 1600×900 точек.

Поведение браузеров

Итак, как должен вести себя благопристойный современный браузер?

Во-первых, он должен поддерживать современные технологии масштабирования, в том числе быть DPI-aware. Другими словами, его интерфейс должен нормально выглядеть в любом разрешении и с любым DPI. Никаких отговорок приниматься не должно: все современные браузеры — это серьезные продукты, над которыми ведется постоянная серьезная работа по улучшению, поэтому отговорки, что у разработчиков не было времени или знаний для оптимизации под масштабирование, несостоятельны.

Во-вторых, он должен поддерживать возможность масштабирования контента (т. е. интернет-страниц), и делать это удобно для пользователя. Что бы мы ни думали, экраны все больше уходят от DPI = 96, а оптимизация сайтов вряд ли будет производиться в ближайшем будущем, поэтому только оптимизация браузера позволит нам комфортно работать с сайтами.

Причем по обоим направлениям ставки довольно высоки: если браузер не будет соответствовать этим требованиям, то с интернет-сайтами, да и с самим браузером просто невозможно будет работать на экранах с высоким PPI. Не сложно, а именно невозможно. Причем нужно помнить и о читаемости, и о возможности управления пальцем.

Раньше по этим направлениям был серьезный разброд, однако все современные браузеры имеют одинаковый механизм масштабирования, причем даже шаг одинаковый: 100, 110, 125, 150%. Более-менее свободное масштабирование могут делать IE (с точностью до 1%) и Opera (до 10 с помощью ползунка, но можно выставлять и свободный масштаб). У всех масштабирование можно проводить клавиатурным сочетанием Ctrl+«−» и «=». Для тех же целей можно использовать Ctrl+колесо мыши. При каждом нажатии браузер изменяет масштаб на ступеньку вверх/вниз и перерисовывает страницу под новое значение масштаба. Это традиционный способ масштабирования, привычный нам.

Однако с недавних пор появился еще один — жест масштабирования, тоже популяризированный компанией Apple. Разводим пальцы — и вуаля! Картинка увеличилась/уменьшилась. Для пользователя все выглядит очень просто, однако эта «простота» и наглядность обеспечиваются работой сложных и изящных технических алгоритмов. Для примера, в iOS масштабирование работает так: когда система уловила, что пользователь производит масштабирование, снимается скриншот, дальше он увеличивается с помощью обычных механизмов масштабирования картинки (поэтому пока вы продолжаете держать пальцы на экране, увеличенная картинка будет размытой). Когда вы отпускаете пальцы, система сообщает браузеру финальный масштаб, и он заново рендерит под него страницу. В рамках тестирования мы решили проверить, как работают с масштабированием жестами современные браузеры, тем более что для Windows 8 такой способ уже является штатным и довольно распространенным.

Internet Explorer 10

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

Правда, и я должен оговориться, что с весны браузер стал шалить (IE10 стоит на всех тестовых ноутбуках, поэтому я пользуюсь им постоянно и на разных системах): частые зависания страниц, нередко браузер подвисает целиком, если открыто в районе 10 вкладок и больше. Но зимой, когда я пользовался им на Acer Aspire S7 (а там им единственным было удобно пользоваться), всё работало очень неплохо.

Одним из его важных достоинств является то, что в Microsoft основательно поработали и над интерфейсом, сделав его более удобным и современным. Я уже не говорю о версии для нового интерфейса Windows 8, в которой под управление пальцем серьезно переработали весь интерфейс, и сделали это очень неплохо. Этот браузер единственный поддерживает корректное масштабирование жестами (к чему мы привыкли на браузерах мобильных устройств), причем в обеих версиях — и под новый, и под традиционный интерфейсы. В остальных браузерах масштабирование жестом работало ужасно либо не работало вообще. Делайте выводы.

Раз браузер разрабатывался в Microsoft, с масштабированием у него всё должно быть в порядке.

В общем, так оно и есть. Для желающих — вот полная версия этого файла (1600 точек по ширине), а вот gif-анимация.

При переходе с 96 на 120 DPI интерфейс увеличивается абсолютно корректно. Интересно, что в IE10 (по-моему, единственном из участников тестирования) при увеличении DPI увеличиваются иконки сайта в заголовке закладки. В частности, поэтому немного увеличивается вертикальный размер вкладок. Для 133% используются те же иконки, что и на 96 DPI (видимо, чтобы не испортить некорректным масштабированием), а на 144 DPI они увеличиваются до того же размера, что и при 120 DPI.

Шрифты в меню увеличиваются, на странице — остаются теми же. Таким образом, даже при выставленном DPI = 144 (т. е. системный масштаб 150%) физический размер шрифта на странице останется таким же, как и при DPI = 96. Чтобы увеличить масштаб страницы, нужно прибегнуть к масштабированию в самом браузере.

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


Из-за этого она выросла в размерах и перестала помещаться на экран, поэтому появился горизонтальный скроллинг (на экране 1600×900, а вот на ноутбуке с Full HD всё выглядело бы чудесно).

Версия с реальным разрешением здесь.

А вот на форуме левая и правая колонки стали пропорционально больше, а средняя уменьшилась (gif-анимация). И опять изменение DPI не влияет на содержимое страницы. На главной странице изменился внешний вид логотипа в левом верхнему углу. Обратите внимание, он стал немного более размытым, хотя ему это вроде даже пошло на пользу. Фотографии в новостях тоже стали чуть размытыми, а вот флэш-баннер справа остался четким.

Цукерберг рекомендует:  Анимированные закладки на CSS3

Включение и отключение XP Style Scaling не оказывает на поведение браузера никакого влияния, т. е. он DPI-aware. Должен сказать, что с этой настройкой во время тестирования вообще были какие-то проблемы, очень часто галочка не снималась (опять же, претензии к разработчикам Microsoft). Но поскольку мы снимали скриншоты сразу для всех браузеров, то они должны находиться в одинаковом положении.

При изменении системной настройки с 96 на 120 DPI браузер Internet Explorer 10 увеличивает масштаб по умолчанию для всех страниц: вместо 100% всегда ставит 125%. Если зайти в меню масштабирования, то масштаб отображается именно как 125% (т. е. можно вернуться на 100%), при нажатии Сtrl+0 (масштаб по умолчанию) он выставится на 125%. Другие браузеры так не делают. Также браузер запоминает масштаб для выбранной страницы, и в дальнейшем она открывается с тем же масштабом, что был установлен в прошлый раз (остальные браузеры тоже умеют это делать).

У версии IE10, на которой проводилось тестирование, выявилась странная проблема: во многих ситуациях IE воспринимал выставленный в меню традиционными средствами масштаб как крайнюю точку отсчета: увеличить масштаб с помощью жеста было можно, а уменьшить (ниже этого значения) — нельзя. Но иногда браузер совершенно спокойно позволял масштабировать страницу и вверх, и вниз, причем речь шла об одном и том же сайте. Закономерности этого поведения за время тестирования мне проследить не удалось.

Google Chrome

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

Полная версия сравнения интерфейса находится здесь, gif-анимация — здесь.

И сразу нас ждет большой сюрприз: Goolge Chrome не поддерживает корректное масштабирование в Windows и не сообщает системе о том, что он DPI-aware. Хотя по скриншоту видно, что браузер все-таки учитывает то, какой параметр DPI выставлен в системе: мы видим, что даже при работе старого алгоритма заголовки окон на вкладках немного увеличиваются. Но увеличиваются они не так чтобы очень сильно, это заметно лишь в сравнении с работой стандартного алгоритма Windows.

Раз Google Chrome не оптимизирован под масштабирование (этот факт у меня как-то не укладывается в голове), то Windows включает для него свой алгоритм. Это сразу видно по размытому тексту. Шрифты и вкладки становятся большими, но зато размываются текст и линии.

Причем та же судьба ждет и текст в окне — он становится крупнее, но размывается. Вот сравнение старого и нового алгоритмов при 120 DPI (125%):

А вот при 144 (150%):

Здесь надо учитывать, что это скриншоты, и мы делали их на мониторе с небольшим PPI. На том же Acer Aspire S7 ситуация будет совершенно другой: текст при DPI = 96 (и масштабе 100%) просто нечитаем, а при DPI = 120, чтобы что-то прочитать, приходится вглядываться и наклонять голову к экрану. Для интересующихся — вот gif-анимация полного экрана со всеми ступенями масштабирования. На других браузерах, не поддерживающих масштабирование, картина будет такой же.

Масштабирование наших сайтов при тестировании Chrome проводил корректно, каких-либо сбоев я не отметил. По умолчанию Chrome всегда ставит масштаб страницы 100% независимо от выставленного в системе DPI. Однако тоже запоминает настройку масштаба для страницы и в следующий раз открывает ту в этом масштабе.

Google Chrome формально работает в новом интерфейсе Windows 8 и даже пытается поставить себя в качестве браузера по умолчанию. Кстати, тут есть тонкий момент: для нового интерфейса работает только один браузер, который установлен по умолчанию. Остальные будут открываться в десктопной версии.

Но на самом деле для работы в новом интерфейсе Windows 8 браузер Google Chrome не подходит. Во-первых, его интерфейс в этом режиме остается абсолютно таким же, как на десктопе, т. е. очень плохо подходит для управления пальцем. А во-вторых, к моему немалому удивлению, масштабирование с помощью жеста пальцами на нашей системе вообще не работало. А лазить каждый раз в меню — увольте.

Firefox

Firefox взаимодействует с системой, сообщая ей о готовности к масштабированию (DPI-aware), поэтому механизм Vista для него не включается — шрифты в интерфейсе приложения всегда остаются четкими и корректного размера.

Полный файл со сравнением (варианты там подписаны, они просто не влезли в сокращенную версию картинки) здесь, gif-анимация — здесь.

Как видите, механизм масштабирования работает хорошо, все шрифты увеличиваются. В то же время графика (например, иконка сайта) всегда остается одного и того же размера, т. е. на экране с высокой плотностью пикселей она станет слишком маленькой. Но это не так уж страшно. Гораздо хуже, что круглая иконка «Назад» тоже осталась того же размера — значит, чем больше плотность пикселей вашего монитора, тем сложнее по ней будет попасть. Наконец, обратите внимание на то, как написано слово Firefox. Оно действительно размывается при увеличении масштаба.

В Firefox размеры интернет-страницы (включая шрифты) не меняются в зависимости от системной настройки, как и в других браузерах. Другими словами, вам придется вручную масштабировать страницу для получения желаемого размера. Firefox предоставляет такую возможность, но почему-то не показывает текущий масштаб. Из-за этого я, возможно, пару раз промахнулся с установкой нужного масштаба (это видно только при прямом сравнении размера сайта в окнах). При этом браузер запоминает настройку масштабирования для страницы, т. е. в следующий раз она откроется с тем же масштабом.

Масштабирование пальцами работает, но я бы назвал это некорректной работой. Firefox, видимо, воспринимает движение пальцами на какое-то небольшое расстояние как поворот колеса мышки на один щелчок (или нажатие сочетания клавиш) и пытается перерисовать картинку под новый масштаб, но это занимает у него время. Так что если вы широко двинете пальцами, следующие секунд пять будете наблюдать судорожные перерисовки страницы под несколько ступеней масштаба — последовательно! Настраивать масштаб под себя таким образом очень сложно и муторно, лучше уж воспользоваться меню.

Opera

Opera — старый, заслуженный браузер с минимальной долей рынка в мире, но при этом довольно популярный среди энтузиастов у нас. В общем, вполне ожидаемо, что корректной поддержки масштабирования Windows у него нет, о DPI-aware системе он не сообщает.

Полное сравнение интерфейсов (с подписями, ширина 1600 точек) — здесь, gif-анимация — здесь.

Причем, что самое смешное, сам по себе интерфейс браузера корректно масштабируется! По крайней мере, шрифты увеличиваются. Правда, графика (иконки) остается того же размера, и кнопки, к сожалению, тоже не увеличиваются в размерах. Ну и что — у Firefox так же, но он же сообщает системе о поддержке масштабирования. Обратите внимание, что, в отличие от Firefox, заглавие Opera здесь — текст, а не картинка.

Казалось бы, подумаешь — не прописали нужную строчку. Масштабирование-то работает! Однако работает лишь до поры до времени — точнее, до тех пор, пока не изменится какой-нибудь внешний фактор. Например, пока кто-нибудь не выставит масштаб на 151% или отключит старый механизм масштабирования, или пока Microsoft при очередном обновлении не сделает так, что по умолчанию будет включаться новый алгоритм. Вот тогда придется в срочном порядке выпускать новую версию и убеждать всех пользователей установить именно ее.

По поведению с включенными новым алгоритмом Opera не отличается от Chrome, поэтому тут особо комментировать нечего. Opera так же, как другие браузеры, всегда ставит для картинки масштаб по умолчанию на 100%, но тоже запоминает выставленный пользователем для конкретной страницы масштаб. Кстати, у нее ползунок масштаба вынесен прямо в правый нижний угол основного окна, так что работать с ним удобнее (подчеркну: речь идет о настройках по умолчанию. Разумеется, с пользовательскими настройками можно достичь многого). Масштабирование пальцами работает так же, как у Firefox, с той же дерготней и перерисовыванием страниц.


Браузеры в режиме Metro

Что касается современного интерфейса Windows, то с ним есть несколько особенностей работы. Во-первых, в нем работает только один браузер — который выбран для системы как браузер по умолчанию. Остальные браузеры при запуске будут перебрасывать вас на десктопную версию. И да, если в качестве браузера по умолчанию стоит не Internet Explorer 10, то он тоже будет переходить на десктопную версию, версия для нового интерфейса работать не будет. Даже если запустить браузер из нового интерфейса.

С другой стороны, ни один из остальных браузеров, участвовавших в тестировании, в новом интерфейсе нормально не работает. Что ставит пользователя в довольно глупую ситуацию: либо оставлять в качестве браузера по умолчанию IE10 везде, либо терять возможность пользоваться браузером под новый интерфейс вообще. Для десктопов это не очень актуально, а вот для планшетов и трансформеров — еще как.

Goolge Chrome единственный из остальных умеет работать в новом интерфейсе, но очень странно. Он открывается на весь экран, но при этом полностью сохраняет десктопный интерфейс (дизайн, размер вкладок и пр.). Управлять в нем пальцем на Yoga13 еще нормально, а вот на Aspire S7 уже никак. Интернет-страницы открываются на 100% (а не 125% или 150%). Ко всему, он вообще не поддерживает масштабирование пальцем (для обеих систем — это уже за гранью добра и зла). При этом он навязчиво предлагает себя в качестве браузера по умолчанию, что грозит слабо разбирающемуся пользователю с планшетом потерей немалого количества нервных клеток.

Разработчики Firefox обещают, что версия под новый интерфейс будет, даже вроде бы есть какие-то беты (работа начата год назад и, судя по внушительному списку проблем, отладка кипит), но финальной версии браузера для нового интерфейса в магазине приложений нет.

Opera, судя по всему, в новом интерфейсе не работает совсем.

В любом случае Internet Explorer 10 сейчас остается единственным нормально работающим браузером под тач-интерфейс. Google Chrome имеет ряд существенных недостатков, не позволяющих работать с ним адекватно.

Замечания и размышления

Итак, суммируем полученную информацию. Во-первых, мы еще раз убедились, что старый механизм масштабирования работает и при DPI больше 120, вплоть до 144 (т. е. до масштаба в 150%). После 144 он все-таки отключается. Если для 120 DPI это поведение оправдано, то от 120 до 144 DPI (от 125 до 150%) его полезность представляется сомнительной, т. к. элементы в исходном размере становятся слишком мелкими. Впрочем, мы уже подробно обсудили это в части про приложения и объяснили, как отключить старый механизм, а дальше решение должен принимать сам пользователь.

Также я обратил внимание, что если при масштабе в приложении 150% выставить еще и DPI = 144 и отключить галочку масштабирования в стиле ХР, то шрифты воспринимаются уже не мутными — скорее, они похожи на то, как выглядят шрифты с активированным сглаживанием. В свое время я наткнулся на мнение, что механизм масштабирования Vista выглядит плохо только на современных мониторах, а вот когда повсеместно будут распространены мониторы со сверхвысоким PPI, на них этот механизм покажет свою эффективность, ибо размытость там уже будет незаметна, а вот универсальное масштабирование — полезная штука, особенно при больших коэффициентах, больше 150-200%. При случае мы проверим, насколько это реально работает для мониторов со сверхвысоким PPI.

Также хочу кратко отметить, что для мониторов со сверхвысоким PPI использование системного алгоритма масштабирования для браузера (вместо его собственного) представляется зачастую более предпочтительным решением, т. к. в этом случае верстка страницы передается абсолютно корректно, как при DPI = 96.

Во время работы с Aspire S7 я несколько раз отмечал, что Chrome и Opera заметно коверкали верстку на некоторых сайтах (Firefox там не был установлен). Речь идет о сайтах с выравниванием по ширине экрана: если в тексте стоит картинка с размером в пикселях и текст обтекает ее, то при масштабировании картинка остается того же размера, но ее положение по отношению к тексту все время разное, и обтекает он ее по-разному. Так что любое изменение масштаба сопровождалось мучительными дерганиями и пересчитыванием всех колонок текста. Впрочем, это проявлялось отнюдь не на всех сайтах, т. е., я думаю, для появления дефекта сайт также должен содержать некие ошибки в верстке. Мне не хотелось бы формализовывать это направление исследований, т. к. в любой момент может обновиться сайт или браузер — и проблемы исчезнут или станут другими. В то же время с этой ситуацией я столкнулся лично и предупреждаю о ней читателей.

Цукерберг рекомендует:  Краудфандинг как представить проект

Кстати говоря, во время тестирования Aspire S7 и IE10 я столкнулся с еще одной проблемой. Однако, на мой взгляд, эта проблема общая и будет проявляться независимо от браузера. Дело в том, что при использовании жеста масштабирования IE10 использует тот же механизм, что и мобильные браузеры: при увеличении масштаба ширина сайта, оптимизированного под ширину экрана, не пересчитывается под новый масштаб, а просто часть изображения или интерфейса уходит за край экрана. Этот подход оправдан для мобильных устройств с небольшими экранами — иначе у них центральная колонка получалась бы слишком узкой при крупных шрифтах.

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

Ну что же, а теперь давайте переходить к выводам.

Выводы

Во время тестирования браузеры работали корректно, и проблем с масштабированием интернет-страниц нашего сайта (и положением картинок) я не отметил. Масштабирование сайтов в целом всеми браузерами производилось адекватно, алгоритм масштабирования (когда масштаб задает пользователь, а не системная настройка) у всех правильный. Особо хочу отметить поведение IE10, который ставит по умолчанию масштаб 125% при значении DPI 120 и выше: это правильный подход, экономящий нервы и время пользователя. В то же время, как вы сами понимаете, интернет — штука весьма разнородная, и практически наверняка проблемы где-то да проявятся. К этому следует быть готовым.

С масштабированием интерфейсов проблемы возникли у всех браузеров. Chrome и Opera необходимо доработать оптимизацию интерфейса и проставить соответствующую отметку для Windows. Из-за отсутствия поддержки у них могут возникать проблемы при работе на экранах с высоким DPI. Три браузера (кроме IE10) при увеличении масштаба оставляют иконки сайтов того же размера. А самое неприятное — что графические элементы интерфейса, в первую очередь кнопки, у них также не увеличиваются при масштабирования. Поэтому на экранах с высокой плотностью пикселей они будут слишком мелкими для корректной работы, а уж пальцем с ними и вовсе вряд ли совладаешь.

Единственный браузер, нормально работающий в интерфейсе Metro, — это IE10. Во-первых, его интерфейс заметно оптимизирован для работы с тачем и пальцем (причем он существенно переработан по сравнению с десктопной версией). Во-вторых, в нем единственном нормально работает масштабирование с помощью жеста двумя пальцами по сенсорному экрану (да и вообще нормально работает, без постоянных рывков). В-третьих, он выставляет масштаб страницы по умолчанию в 125% при увеличении системной настройки. К сожалению, у него намного чаще, чем у других браузеров, возникают проблемы в работе (зависания, сбои и т. д.), но по уровню сервиса (особенно для пользователей, которым важны простота и удобства) он намного лучше конкурентов.

Особо хочется отметить поведение Chrome, который пытается поставить себя как браузер по умолчанию для нового интерфейса при том, что в интерфейсе Metro с ним работать неудобно: он не имеет оптимизации под работу пальцем, а также в нем отсутствует корректное масштабирование. Такое поведение создает пользователю массу ненужных проблем.

Приемы использования единиц окна просмотра на мобильных устройствах

Дата публикации: 2020-09-04

От автора: единицы, которыми измеряется окно просмотра, всегда были противоречивыми, и для некоторых из них все еще усложнилось в связи с тем, что мобильные браузеры имеют собственные мнения относительно того, как их реализовать.

Реальный пример: следует ли учитывать полосу прокрутки для единицы vw? Что насчет панели навигации сайта или элементов управления страницы — должны ли они учитываться при расчете? Также есть физические атрибуты самих устройств, которые нельзя игнорировать.

Для начала небольшой контекст

Спецификация довольно расплывчата в отношении того, как нужно вычислять единицы окна просмотра. Для мобильных устройств нам часто приходится иметь дело с вертикальной высотой, поэтому давайте рассмотрим конкретно высоту окна просмотра (vh): Единица vh — Равна 1% от высоты исходного блока контейнера.

Так что да, четких указаний, связанных с работой на различных устройствах и в конкретных браузерах, нет.

Сначала vh рассчитывалась, основываясь на размерах текущего окна просмотра браузера. Если вы открыли браузер и начали загружать веб-сайт, 1vh был равен 1% от высоты экрана, минус интерфейс браузера.

JavaScript. Быстрый старт


Изучите основы JavaScript на практическом примере по созданию веб-приложения

Но! Если вы начинаете прокручивать окно, это совсем другая история. Как только вы пролистаете часть интерфейса браузера, например, адресную строку, значение vh будет обновляться, а в результате — скачок контента.

Safari для iOS был одним из первых мобильных браузеров, в котором реализации была обновлена — выбиралось определение фиксированного значения для vh на основе максимальной высоты экрана. Таким образом, пользователь не сталкивается со скачками контента на странице, когда адресная строка перестает отображаться. Мобильный браузер Chrome последовал этому примеру около года назад.

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

Элемент обрезается внизу, когда адресная строка находится в поле зрения (слева), но мы хотим, чтобы все было правильно (справа).

Пользовательские свойства CSS: Прием для корректировки размеров

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

В JavaScript вы всегда можете получить значение текущего окна просмотра с помощью глобальной переменной window.innerHeight. Это значение учитывает интерфейс браузера и обновляется при изменении его видимости. Хитрость заключается в том, чтобы сохранить значение размеров окна просмотра в переменной CSS и применить это к элементу вместо блока vh.

Скажем, для этого примера наша пользовательская переменная CSS —vh. Это означает, что мы можем применить ее в CSS следующим образом:

Изменение размера изображения относительно блока

Доброго времени суток. ��

В данном уроке покажу как сделать, чтобы при адаптивной верстке, когда ширина блока меняется, изображение, которое располагается в нем, изменяло свои размеры относительно блока. У меня был урок — Как растянуть фон на всю ширину блока, схожий с этим, но там изменялся фон блока. Тут же способ для изображения вставленного с помощью тега IMG.

Пример адаптивного масштабирования изображения относительно родительского блока, можете посмотреть в примере. Чтобы увидеть изменение изображения, просто измените размер окна, вашего браузера.

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

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

Для примера, блок будет иметь ширину 75% относительно экрана, картинка в нем будет занимать всю ширину и менять свой размер вместе с блоком.

У блока будут стили:

Картинке же присвоим максимальную ширину в процентах и автоматическое определение высоты. Высоту обязательно иначе, при уменьшении ширины блока, картинка будет менять свою ширину но не высоту и будет неправильной формы. Готовые стили будут примерно такими.

Как можете видеть, все очень просто. Если указать все параметры правильно, то результат тоже будет нужным. В свое время, я помучился, чтобы добиться такого эффекта.

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Изменение размеров изображения посредством адресной строки браузера

В наше блоггерское время без редактора изображений для выкладывания картинок в сеть вообще не обойтись – даже те, кто утверждает, что картинка “совсем без Фотошопа” (наверное, преимущество такое, я не совсем понимаю такое заявление) обязательно изменяют пиксельные размеры фотографии, чтобы ее можно было показывать в интернете, а многие еще и четкость повышают – это стало нормой.

Однако даже этого мало: порой надо сделать еще и изображение для предпросмотра картинки, соответственно, изменять потребуется еще раз, а то и попутно кадрировать, чтобы изображение предпросмотра соответствовало стандартам сайта. Конечно, при наличии PHP-надстроек вроде GD или ImageMagick многие скрипты блогов могут изменять размер изображения и сами, отдавая пользователю требуемый результат, однако процесс контролируется только человеком, владеющим сайтом, вручную, а подчас можно лишь получить картинку предпросмотра фиксированного размера.

А ведь при написании новостей на сайтах, где часто используются изображения, дорога каждая секунда (у меня так, думаю, и у остальных тоже, причем по совершенно разным причинам), и тратить ее на ресайз фотографии часто очень жалко. Впрочем, умные люди существуют, и вот один из них, Джо Ленчиони, придумал довольно несложный скрипт PHP под названием Smart image resizer (хитрый ресайзер), который выдает пользователю изображение только на основе параметров height и width, которые можно вставлять в качестве аргументов прямо в код тега img, выводящего картинку – правда, не обычным способом, а через знак вопроса, при этом тег принимает следующий вид:

Как видно, тег позволяет устанавливать не только размеры уже загруженной картинки, но и соотношение сторон, по которым скрипт может осуществлять кадрирование исходного изображения.

Какова польза решения? Взяли, изначально загрузили большое изображение (для защиты авторских прав, наверное, не стоит грузить оригинал), потом для ваших целей автоматизируете процесс: к примеру, на главной странице можете выводить его миниатюру 150х150, сделав предпросмотр определенного количества статей, а в тексте записи уже изображение, подходящее под ширину полосы, причем, применить это только к страницам или к новостям, вам решать.

Можно применять и на фотоблоге – ведь по коду javascript можно узнать разрешение экрана получателя картинки – таким образом можно подгонять не только форматирование текста, но и размер самой фотографии, чтобы не вылезала за пределы мониторов).

Оригинально? Безусловно. Самое приятное – то, что скрипт бесплатен и использует он стандартные библиотеки – GD и, естественно, требует наличия самого PHP (если у вас есть WordPress, то последний уж точно поддерживается). Работает с изображениями JPEG, GIF, PNG, в качестве бонуса скрипт повышает четкость изображения после ресайза.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих