что такое настольный веб сайт
Как переключиться с мобильной версии сайта на настольную в iOS 13
Несмотря на то что большинство пользователей сегодня предпочитают выходить в интернет со смартфона, а не с компьютера, многие сайты по-прежнему не имеют сколь-нибудь удобной мобильной версии. В этом случае единственным вариантом продолжить работу с ними остается переход на десктопную версию. А поскольку кнопка ее активации спрятана далеко в настройках веб-браузера, многие даже не подозревают, что такая возможность вообще есть. Но в iOS 13 все станет куда нагляднее и удобнее.
При разработке iOS 13 Apple решила переработать Safari таким образом, чтобы часто используемые элементы веб-браузера всегда находились под рукой у пользователя. В результате, помимо меню «Поделиться», в которым обычно происходило переключение с мобильной на десктопную версии сайтов и наоборот, в Safari появилось вспомогательное меню, куда и был вынесен тот самый переключатель.
Как включить настольную версию сайта в Safari
Благодаря вынесению переключателя в отдельное меню теперь смена версий происходит всего в два нажатия, тогда как раньше пользователю приходилось еще и прокручивать список доступных действий в меню «Поделиться». Кроме того, здесь же можно дополнительно настроить отображение веб-сайта, изменив размеры его элементов, открыв его во весь экран или активировав режим чтения, который скрывает все изображения и рекламу, размещенные на странице.
Подписывайся на наш канал в Яндекс.Дзен. Там каждый день выходят эксклюзивные материалы, которых нет на сайте.
Как запросить настольную версию веб-сайта для вашего iPhone или iPad
В то время как многие веб-сайты в наши дни используют адаптивный дизайн, который масштабирует всю веб-страницу, чтобы она соответствовала экранам меньшего размера, все еще есть досадное количество тех, кто настаивает на предоставлении «уменьшенных» мобильных версий пользователям iPhone и iPad. Это может быть проблемой, особенно если вы используете iPad и запускаете мобильный дисплей, слишком большой для вашего экрана, или вы пытаетесь найти функцию, которую владелец веб-сайта просто не предоставил. в мобильной форме.
К счастью, вы можете проигнорировать пожелания владельца веб-сайта и получить любую версию, которую захотите, с помощью быстрого трюка с Safari.
Примечание. Хотя это буду работа на «м.[domain].com «- вам просто нужно повторно ввести исходный» domain.com «в строке URL, чтобы получить сайт — вы не получите версию для настольного компьютера, если сайт, который вы посещаете, был спроектирован специально для масштабировать до определенных размеров экрана.
Как запросить настольную версию веб-сайта в мобильном Safari
Это будет продолжаться до тех пор, пока у вас открыта вкладка для этого веб-сайта; закройте вкладку или введите новый веб-адрес на этой вкладке, и вы вернетесь к мобильной версии, если вернетесь.
До свидания, Electron. Здравствуйте, настольные PWA
Автор материала, перевод которого мы сегодня публикуем, говорит, что он, возможно, слишком торопится, но то, о чём он хочет рассказать, представляет собой, по меньшей мере, весьма интересную новость. Речь идёт о настольных прогрессивных веб-приложениях, которые вполне могут значительно потеснить позиции приложений, основанных на Electron.
Новшества Chrome v70
Свежая версия Chrome (v70) поддерживает настольные прогрессивные веб-приложения (Desktop Progressive Web Apps, PWA) на платформах Linux и Windows.
Поддержка настольных PWA в Chrome
Если взглянуть на список поддерживаемых систем, тут же становится заметным отсутствие в нём MacOS. Однако это так лишь до тех пор, пока не выйдет Chrome v72.
Поддержка настольных PWA в MacOS
Важно отметить, что хотя эта возможность в MacOS по умолчанию не включена, её можно активировать с помощью соответствующего флага. Для этого надо открыть Chrome, перейти по адресу chrome://flags и найти там этот флаг. Можно и перейти к флагу напрямую, воспользовавшись ссылкой chrome://flags/#enable-desktop-pwas.
Что такое прогрессивные веб-приложения?
В особые подробности, касающиеся PWA, мы тут вдаваться не будем. Вот раздел документации Google, в котором можно почитать о них. Для того чтобы своими глазами увидеть PWA и попробовать их в деле, откройте Chrome для Android или Safari в iOS (тут, правда, поддерживаются не все возможности PWA) и посмотрите эти примеры. А вот — выступление на эту тему с Google I/O ’18.
Что такое Electron?
Electron — это платформа, которая позволяет разработчикам создавать кросс-платформенные настольные приложения с использованием JavaScript, HTML и CSS. Здесь же используются некоторые замечательные JavaScript-библиотеки и фреймворки. Это облегчает веб-программистам вхождение в разработку настольных приложений. Приложения, основанные на Electron, в последние годы приобрели огромную популярность. В рамках таких проектов, как Slack, VS Code, Atom, Discord, вложены немалые силы в разработку приложений с использованием Electron. Если вам эти проекты не знакомы, то вам, определённо, стоит взглянуть на соответствующие приложения и сервисы. Традиционные настольные приложения нередко казались какими-то неуклюжими, элементы их интерфейсов выглядели как нечто устаревшее. Electron, определённо, принёс красоту и изящество в мир настольных приложений.
При чём тут PWA?
Хотя Electron-приложения — это растущее и развивающееся явление, и их реализация близка к реализации веб-приложений, у них, всё же, есть некоторые минусы. Во-первых, такие приложения используют собственные экземпляры браузера Chromium. Многие знают о том, сколько оперативной памяти нужно для работы Chrome. Теперь, для того, чтобы оценить ситуацию, возникающую в системе при одновременном запуске нескольких Electron-приложений, надо взять их количество и умножить на этот объём памяти. Если интересно — откройте несколько Electron-приложений и посмотрите на то, сколько памяти они потребляют.
Чрезмерное использование памяти — это само по себе не очень хорошо, а сюда ещё надо добавить то, что многие Electron-приложения специфическим образом взаимодействуют с Node.js, не обязательно делая это так же, как соответствующие веб-приложения.
Использование Electron добавляет сложностей, связанных с поддержкой старых версий программ и с наладкой процесса обновления приложений.
Теперь поговорим о настольных PWA. Представьте себе приложения, которые выглядят как те, что написаны на Electron, с которыми так же удобно работать, но при этом устанавливать их проще простого, обновляются они тоже без проблем, в ходе передачи клиенту материалов единственного веб-приложения. Возникает такое ощущение, что Chrome задаёт стандарт для подобного сценария поведения в настольных PWA. Когда пользователь, работающий в Chrome, посещает некую веб-страницу, и представленное ей приложение соответствует этому набору критериев, у разработчика приложения появляется возможность предложить пользователю установить приложение на его компьютер. Приглашение выглядит примерно так, как показано ниже.
Приглашение на установку PWA
Значок для запуска PWA
После запуска подобного приложения оно открывается в браузерном окне, не оснащённом обычными элементами управления. Такое приложение воспринимается как настоящее настольное приложение.
Пример PWA
Вот пример настольного PWA, скриншоты которого были использованы выше в виде иллюстраций. Вот его репозиторий на GitHub. Для того чтобы установить это приложение, нужно включить соответствующий флаг в Chrome и провести на сайте хотя бы 30 секунд.
Как уже было сказано, веб-приложение, для того, чтобы считаться настольным PWA, должно соответствовать определённому набору требований. Если вы хотите создать и испытать собственное настольное PWA, можете взять за основу этот репозиторий и учесть требования. Если сделать краткую сводку по ним, то получится следующее:
Дополнительные примеры
Если вы работаете на MacOS, то PWA могут счесть, что установить их вы не сможете, и не покажут вам приглашение для их установки. Если включить соответствующие флаги и повозиться с консолью разработчика, можно добиться от PWA того, что они приглашение на установку выведут. Вот некоторые из существующих PWA, которые удалось установить на Mac.
▍Starbucks
Компания Starbucks вложила немало сил в разработку отличного PWA. Их настольное приложение получилось прямо-таки впечатляющим.
▍Google Maps
Это — просто замечательное приложение. Оно делает своё дело и не особенно сильно нагружает систему, отличаясь быстрой работой и отзывчивым дизайном. Для установки этого приложения нужно исхитриться и загрузить мобильный сайт Google Maps.
Компания Twitter постаралась при разработке мобильного PWA, а настольную версию можно считать достойным дополнением к мобильному приложению.
Итоги
Не смотря на то, что вокруг настольных PWA поднято много шума, нужно отдавать себе отчёт в том, что эта технология пока находится на стадии становления. В частности, можно отметить следующие направления развития настольных PWA:
Уважаемые читатели! Планируете ли вы разрабатывать настольные PWA?
Новые возможности Safari в iOS 13
Вчера состоялся релиз iOS 13, добавившей устройствам под управлением этой операционной системы множество новых возможностей, дополнений, призванных улучшить пользовательский опыт, а также бессчётное количество полезных, но малозаметных изменений, которые сразу не просто даже заметить. Например, серьёзно обновился браузер Safari, ещё на шаг приблизившись к десктопному по функциональности. Но новая папка загрузок и улучшенная поддержка сайтов — далеко не всё, чем разработчики порадовали. В новую версию приложения завезли новые панели настроек и опций, шрифты для режима чтения и многое другое.
iPhone 11 Pro Max лежит на клавиатуре MacBook Pro
Панель настроек Safari
Главная страница популярного сайта appleinsider.ru
Доступ к новой панели настроек Safari осуществляется при помощи новой кнопки, расположенной слева в адресной строке, и выглядит как значок aA. Из этого меню можно настроить масштаб страницы, увеличив текст, при этом вплоть до 200-процентного увеличения страница будет вмещаться по ширине на экран.
Так выглядит увеличение веб-страницы в Safari
При переходе на другую страницу, настройки предыдущей сохраняются, поэтому если шрифт казался слишком мелким и его пришлось увеличить, таковым он и останется при следующем посещении.
Опция «Скрыть панель инструментов» делает именно это: скрывает панель инструментов, оставляя вверху лишь тонкую полоску с названием сайта. Чтобы вернуть панель инструментов назад, следует нажать на эту полоску.
Новое меню Safari с настройками отображения
Запрос настольного веб-сайта
Эта опция позволяет открыть для просмотра настольную версию сайта или вернуться назад на мобильную. Также можно настроить отображение для каждого сайта при помощи опции настроек сайта. Опция окажется весьма полезной для пользователей iPad — на смартфоне всё-таки не очень удобно листать десктопный вариант любого сайта.
Выключить правила блокирования контента
Эта опция позволяет одним тапом выключить или снова включить блокировщик рекламы на этой или иной странице. Как и в случае с другими настройками, изменения для каждой страницы сохраняются, каждый раз повторять одни и те же действия не придётся.
Настройки веб-сайта
При помощи этого подменю можно задать настройки для каждого сайта: разрешить или запретить доступ к местоположению, активировать или заблокировать камеру и микрофон. В зависимости от общих настроек приватности, эти опции будут либо активны, либо заблокированы.
Здесь же есть опция включения режима «для чтения» на определённых веб-страницах, которая очень помогает при просмотре кривых и некрасивых веб-сайтов, автоматически приводя их страницы в божеский вид. Конечно же, лучше всего избегать посещения таких мест, отдавая предпочтение качественным сайтам с хорошим контентом.
Разработчики приложения действительно постарались, сделав полезную надстройку с нужными каждому пользователю браузера настройками. Но самое главное преимущество обновившегося браузера состоит в том, что для активации всего этого не нужно ломиться в настройки и долго лазить по вкладкам: всё и так под рукой.
Надстройки уже доступны всем, кто обновился на iOS 13. С удовольствием почитаем ваши восторженные комментарии в нашем телеграм-чате. Добро пожаловать!
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Лонгриды для вас
Начиная с iPhone XR, Apple отказалась от технологии 3D Touch, которая реагировала на усиленное нажатие на дисплей, в пользу Haptic Touch. Она работает схожим…
19 cентября вышел публичный релиз iOS 13, о чём Appleinsider.ru, как всегда, сообщил одним из первых. Многие пользователи, посмотрев на тёмную тему и старую …
Уже несколько дней мы продолжаем изучать, что нового Apple привнесла в iOS 13. Тёмную тему оформления обсудили уже все. Поругаться на старую звонилку и отсут…
rzr510, Значок самолета отображается во всех приложениях, если вы его включали хоть раз с момента включения самого девайса. Это глюк iOS13, а не обновленного Safari.
Как всегда открывать полную версию веб-сайта на iPhone и iPad
Несколько лет назад попытка открыть более-менее серьезный сайт на смартфоне превращалась в весьма плохую затею, так как на небольшом экране невозможно полноценно отобразить все ссылки, текст, графику, видеоролики. Кроме того, иногда вдобавок все это перекрывает ещё и громадный рекламный баннер. Соответственно нужно было как-то увеличивать отображаемый контент и работать с вебстраницей «по частям». К счастью, вебдизайнеры довольно быстро сообразили, что можно делать версии сайтов, адаптированные для мобильных устройств, с которыми будет удобно работать. Некоторые разработчики также решали проблему, выпуская мобильные приложения для iOS, Android и Windows.
Safari — лучший браузер на мобильных гаджетах Apple, который имеет много возможностей
Какая версия сайта открывается по умолчанию на iPhone и iPad
На сегодняшний день большинство сайтов сами умеют определять, с какого устройства и каким браузером их пытаются открыть, и если пользователь работает в браузере на смартфоне или планшете, ему по умолчанию будет загружена мобильная версия сайта. Так работает практически на всех Android смартфонах и планшетах, и на iPhone. На iPad так происходит до версии iOS 12 включительно. Начиная с iPadOS 13, встроенный браузер Safari по умолчанию пытается открыть версию, предназначенную для десктопных браузеров.
Как открыть версию сайта для компьютера на iPhone
Иногда все же требуется работать не с мобильным приложением, а с самим сайтом, причем с его полной десктопной версией. У меня такая необходимость возникала при работе с сайтом моего банка, поскольку в мобильном приложении реализованы не все функции клиент-банка. Также это было необходимо для прослушивания «бесплатной» музыки и расширенного управления списком друзей ВКонтакте, для сортировки плейлистов на YouTube-канале. Да и мало ли сценариев может быть в жизни, когда на какое-то время на экране мобильного гаджета возникает необходимость отобразить версию веб страницы для компьютера.
Чтобы отобразить десктопную версию сайта на iPhone и iPad под управлением iOS ранее 13 версии, нужно в Safari тапнуть по кнопке «Поделиться» и внизу меню прокрутить вправо и выбрать соответствующий пункт.
Или воспользоваться более легким способом – коснуться и удерживать палец на кнопке «Обновить» в адресной строке браузера. Последний поймёт, что ему нужно запросить десктопную версию сайта.
Начиная с iOS 13, на iPhone необходимо в левой части адресной строки Safari тапнуть на кнопке АА и в открывшемся меню выбрать «Запрос настольного веб-сайта».
Открываем десктопную версию сайта на iPhone
Если же по каким-то причинам требуется напротив открыть мобильную версию сайта, например на iPad, где по умолчанию iPadOS настроена на открытие версии для компьютера, то нужно в меню, открываемом при тапе по кнопке АА, выбрать «Запрос мобильного веб-сайта».
Открываем мобильную версию сайта на iPad
Как всегда открывать нужный сайт на iPhone в настольной версии
Для того, чтобы всегда открывать определенный сайт на iPhone в десктопной версии в iOS 13, нужно в меню Safari, открываемом по тапу на кнопке АА в адресной строке, выбрать «Настройки веб-сайта» и в открывшейся странице параметров включить первый сверху переключатель «Запрос настольного веб-сайта». Теперь нужный сайт всегда будет открываться в своей полной версии, предназначенной для просмотра на компьютере.
Этот сайт всегда будет открываться на iPhone в полной версии
Как узнать, какие сайты будут всегда открываться на iPhone в полной версии
Для управления сайтами, которые открываются в десктопной версии, предназначен соответствующий пункт настроек Safari. Достаточно пройти по пути Настройки–Safari и в разделе «Настройки для веб-сайтов» выбрать второй пункт «Запрос настольного веб-сайта». Откроется страница настроек, на которой будут представлены все сайты, для которых пользователь определил режим открытия в полной версии. Напротив каждого сайта есть переключатель, который можно перевести в положение «Выключено», если нужный сайт потребуется открыть по умолчанию в мобильной версии.
Управление сайтами, которые открываются в настольной версии в настройках
Также возможно полное удаление из списка сайта, для которого предусмотрено исключение в виде открытия его в настольной версии. Для этого тапаем справа вверху по кнопке «Править» и, отметив нужные записи, тапаем «Удалить» в верхнем левом углу. При желании можно удалить все записи для чего тапаем «Удалить все настройки».
Вам также могут быть интересны еще 7 трюков для работы в Safari на iPhone и iPad.
Как открывать вообще все сайты на iPhone исключительно в полной версии
Если пользователем не был добавлен ни один сайт для открытия его на iPhone в настольной версии, то в соответствующем пункте настроек Safari будет только один пункт «Все веб-сайты» с переключателем в положении «Выключено». Достаточно перевести этот переключатель в положение «Включено», как браузер начнёт запрашивать всегда десктопные версии сайтов. Кстати, на iPad под управлением iPadOS этот переключатель по умолчанию стоит в положении «Включено».
Так все сайты на устройстве будут открываться в настольной версии
Как на iPad вернуть загрузку мобильной версии сайта по умолчанию
Бывают и обратные ситуации, когда мобильное приложение для конкретного сайта написано исключительно для iPhone. Соответственно, при установке его на iPad оно отображается в небольшом окошке причём только в портретной ориентации. Смотрится это ужасно неэстетично и работать с этим некомфортно. Пользователи Instagram на iPad понимают, о чем я. В тоже время полная версия сайта может быть слишком перегружена различными элементами и, как результат, быть плохоюзабельной даже на немаленьком экране iPad Pro.
В таком случае отличным решением является как раз выбор мобильного представления сайта. Для меня таким сайтом является фирменный сервис «Укрзалізниці» для покупки билетов на железнодорожный транспорт. Соответствующее мобильное приложение существует исключительно для iPhone, а с полной версией сайта удобно работать только на компьютере с хорошей диагональю экрана. Поэтому для таких случаев я тапаю по кнопке АА в адресной строке Safari, выбираю «Настройки веб-сайта» и перевожу переключатель «Запрос настольного веб-сайта» в положение «Выключено». При этом соответственно всегда есть возможность управлять такими исключениями также как и на iPhone в настройках Safari в разделе «Настройки для веб-сайтов» пункт «Запрос настольного веб-сайта».
Отключаем полную версию сайта на iPad
Управление списком сайтов на iPad, которые всегда открываются в мобильной версии
Пользуетесь ли вы соответствующими возможностями на iOS и iPadOS? Делитесь мнением в комментариях и в нашем Telegram-чате.
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Лонгриды для вас
Apple Pencil за время своего существования стал по-настоящему профессиональным инструментом. В статье рассказываем есть ли применение у этого аксессуара для простых пользователей, не занимающихся рисованием или дизайном.
Технологии в 2021 веке проникают в каждую профессию и музыканты здесь не исключение. Не важно, играете вы на клавишах, даете уроки игры на гитаре или проводите дни с барабанной установкой в гараже, вы точно сможете найти полезный софт в нашей подборке.
На протяжении многих лет пользователи iPhone на форумах жалуются на низкое качество снимков после воздействия сильной вибрации. Недавно Apple отреагировали на жалобы и выпустили статью на официальном сайте. Разбираемя, что не так с камерами смартфонов.
Смотрю, что в последнее время очень много хейта в сторону редакции. Скажу следующее: Эплнинсайдр, спасибо за статьи и за вашу работу — вы лучшие! 🙂