сайт на телефоне открывается увеличенным
В исходном коде указано:
На эмуляторе виндоус фон страница открывается, где виден только логотип
У заказчика на айфон 6 открывается как на эмуляторе виндоус. то есть увеличенно.
Если убрать строку с viewport, то ничего не меняется.
Если у параметров initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.1 везде установить 0.1, тогда на эмуляторе показывается во всю ширину, а у всех остальных уменьшается в несколько раз (так, что появляются большие отступы со всех сторон), и при этом не работает маштабирование.
Суть проблемы в том, что сайт на телефоне должен открываться так же как и на компе, то есть без увеличения, как у девушки на андроид
Помогите, у кого какие есть идеи?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Не правильное отображение сайта на мобильных устройствах
Помогите пожалуйста разобраться с сайтом. При открытии сайта на телефоне правая часть сайта.
Отображение фона на мобильных устройствах
Добрый день! Подскажите, пожалуйста, что я не учел? Есть сайт stroydvor39.ru. На компе фон.
Вертикальное отображение страницы на мобильных устройствах
Одна из страниц моего статичного, простого html/css сайта, при вертикальном расположении мобильных.
Некорректное отображение на мобильных устройствах и пустой отступ справа
Доброго времени суток! Помогите решить проблему: сайт некорректно отображается на мобильных.
Как увеличить или уменьшить масштаб страницы на телефоне, планшете Андроид, компьютере, ноутбуке мышкой и на клавиатуре?
Инструкция по увеличению и уменьшению масштаба страницы в популярных браузерах и текстовых редакторах.
Страницы браузеров по умолчанию автоматически подстраиваются под разрешение экрана на устройстве пользователя. Однако как на ноутбуках, так и на смартфонах с планшетами в браузерах существует опция увеличения масштаба одной отдельной страницы, или же всех без исключения. Данная функция крайне полезна для людей с проблемным зрением, но также она широко используется обычными пользователями и веб-дизайнерами.
В нашей статье мы рассмотрим несколько основных способов увеличения масштаба страницы в таких браузерах, как Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузере на стационарных компьютерах, ноутбуках, смартфонах и планшетах, а также затронем тему увеличения масштаба в таких текстовых редакторах, как Microsoft Word и Exel.
Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер но стационарных компьютерах и ноутбуках?
Опция увеличения масштаба страницы во всех браузерах активируется примерно одинаково, поэтому мы покажем Вам, как изменить масштаб, на примере Яндекс.Браузера:
Рисунок 1. Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер но стационарных компьютерах и ноутбуках?
Рисунок 2. Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер но стационарных компьютерах и ноутбуках?
Рисунок 3. Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер но стационарных компьютерах и ноутбуках?
Рисунок 4. Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер но стационарных компьютерах и ноутбуках?
Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер на смартфонах и планшетах?
Рисунок 1. Как увеличить или уменьшить масштаб страницы в браузерах Google Chrome, Opera, Mozilla Firefox и Яндекс.Браузер на смартфонах и планшетах?
Как увеличить или уменьшить масштаб страницы в текстовых редакторах Microsoft Word и Exel?
Необходимость изменения масштаба может потребоваться и при работе с популярными текстовыми редакторами. В Microsoft Word данная опция может пригодиться для того, чтобы оценить оформление текста, а в Exel для просмотра полной таблицы. Вне зависимости от того, какую версию Microsoft Office Вы используете (Microsoft Office 2003, 2007 или 2010), изменение масштаба в них происходит совершенно одинаково:
Рисунок 1. Как увеличить или уменьшить масштаб страницы в текстовых редакторах Microsoft Word и Exel?
Рисунок 2. Как увеличить или уменьшить масштаб страницы в текстовых редакторах Microsoft Word и Exel?
ВИДЕО: Как увеличить масштаб страницы в популярных браузерах?
Как я заметно увеличил скорость загрузки страниц в Chrome на Android
Как разогнать Chrome? Это хрестоматийный вопрос, который, кажется, наряду с другими важными вопросами лежит в основе всего мироздания. Ну, по крайней мере, так думает большинство пользователей фирменного браузера Google. Ведь не даром они считают, что новый Mac Pro с 1 ТБ оперативки вышел только для того, чтобы они смогли запустить в Chrome 2-3 вкладки разом. Но это справедливо в отношении только десктопной версии. Мобильная же – очевидно, из-за отсутствия расширений – не так сильно нагружает железо и в целом работает довольно сносно. Но это не значит, что разогнать Chrome для Android нельзя совсем.
Chrome для Android можно разогнать. Ну, по крайней мере, в одном направлении
«Яндекс.Браузер» — лучший браузер для Android, но я всё равно выбираю Google Chrome
В Chrome 86 для Android (скачать), чей релиз состоялся в начале недели, появилась поддержка механизма bfcache (back and forward cache). Как ясно из названия, его предназначение заключается в кэшировании всех веб-страниц, которые открыл пользователь в пределах одного сеанса. Благодаря ему возврат на ранее открытую страницу производится моментально, не требуя загрузки. То есть вы можете перемещаться по ссылкам в пределах одного сайта, а потом нажать на кнопку «Назад», и страница откроется в тот же миг. Это очень круто, учитывая, что без bfcache даже ранее открытые страницы зачастую всё равно требовали загрузки.
Как включить bfcache в Chrome
По умолчанию механизм bfcache отключён, а включить его можно только в экспериментальном меню. Это указывает на то, что Google пока не готова к релизу нововведения, но всё-таки позволила испытать его опытным пользователям, которые в курсе, как работают флаги.
Back-forward cache — это механизм, который нам нужен
Теперь нужно проверить работоспособность механизма. Перейдите по этой ссылке в нашу статью, найдите на странице любую ссылку и нажмите на неё, а на открывшейся странице – найдите другую и нажмите уже на неё. Лучше, чтобы переходов было 3-4 – так эффект будет более заметен. После того как вы ушли достаточно глубоко, просто нажмите на кнопку «Назад» либо свайпните по экрану для возврата, если у вас включено жестовое управление. Обратите внимание, что загрузка предыдущей страницы произошла мгновенно.
Повысить скорость загрузки в Chrome
Это может быть неочевидно в первые минуты, но, если отключить механизм back-forward cache, вы увидите, что даже те страницы, на которые вы возвращаетесь и которые по логике вещей уже должны были быть загружены, всё равно загружаются заново, тратя ваше время. А ведь, как показали исследования Google, 19% всех переходов в браузерах приходятся именно на возвраты на ранее открытые страницы. Это довольно большая цифра, а значит, использование bfcache будет иметь смысл для всех независимо от условий использования.
Интересно, что внедрить механизм bfcache планировалось больше года назад. Тогда разработчики Google даже выпустили специальный видеоролик, в котором сравнили скорость загрузки веб-страниц Chrome с использованием нововведения и без него. Но, как оказалось, всё было выглядело просто. На самом же деле разработчикам поискового гиганта пришлось приложить массу усилий для того, чтобы заставить браузер удерживать в памяти все компоненты ранее открытых веб-страниц, чтобы иметь возможность вернуться к ним без загрузки.
Новости, статьи и анонсы публикаций
Свободное общение и обсуждение материалов
Google Chrome по праву может считаться главным браузером в интернете. Ежедневно его открывает огромное количество пользователей по всему миру. Совсем недавно состоялся релиз новой 94 версии популярного приложения от компании Google, и теперь обновления будут выходить немного иначе. Если раньше они выходили каждые шесть недель, то сейчас этот срок будет уменьшен до четырех. Таким образом пользователи смогут наслаждаться новыми фишками чаще, а серфинг в сети станет еще быстрее и безопаснее. Изменений вышло достаточно много, так что обещает быть интересно.
Несмотря на то что у Apple довольно много сервисов, которые можно было сделать кросс-платформенными, компания никогда особенно к этому не стремилась. Единственное исключение, которое она сделала до сих пор, касалось Apple Music. Но это можно считать своего рода экспериментом, потому что это был первый подписной сервис компании такого типа. Да, был ещё iCloud, но там и цены другие, и потенциальный охват у него, как ни крути, уже. Тем не менее, совсем скоро для Android выйдет, пожалуй, лучшее и наиболее технологически продвинутое приложение Apple – «Локатор».
Google постоянно за что-то штрафуют, в чём-то обвиняют и к чему-то обязывают. Это происходит и в США, и в Европе, и в России. Но обычно до рядового пользователя все эти разборки не доходят. В конце концов, кому какая разница, нарушила Google патент или не допустила в Chrome какую-нибудь местечковую поисковую систему. Само собой, никакой. Но иногда проблемы Google становятся нашими общими проблемами, потому что от их решения напрямую зависит, останется у нас доступ к её сервисам или нет.
Адаптация сайта на мобильных устройствах
Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).
Этот метатег вставляют в контейнер head вашего сайта.
По умолчанию мобильные браузеры отображают страницу сайта точно так же как и в ПК. Что естественно портит внешний вид сайта и делает мало пригодным для использования сайта на мобильных устройствах.
Для более детальной настройки отображения используем дополнительные значения
Ширина сайта на экранах мобильных устройств
Позволяет адаптировать ширину сайта под ширину экрана устройства
Это конечно несколько улучшает просмотр сайта, но только в плане того что ширина сайта становится такой же как и ширина экрана мобильного устройства. Зато делает абсолютно не читабельные страницы т.к. очень сильно уменьшает текст, картинки и т.п. А так же нарушает модульную сетку сайта.
Для того что бы сделать сайт еще и читабельный, зададим фиксированную ширину отображения страницы и уже при этой ширине будем в стилях править отображение текстов, блоков и т.д. На нашем примере возьмем за основу ширину сайта 600px:
А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.
Высота сайта на экранах мобильных устройств
В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.
Для исправления этой ошибки мы можем использовать правило
Масштабирование сайта на экранах мобильных устройств
С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.
Разрешить масштабирование на смартфоне:
Запретить масштабирование на мобильном телефоне:
Подитог
И так мы создали свой viewport и так же для него создали медиапзапрос
В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)
Viewport:
Медиазапрос:
рис.1 Отображение сайта без метатега viewport 
рис.2 Отображение сайта с атрибутом width=device-width
рис.3 Отображение сайта с атрибутом width=600
Верный viewport
Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:
Проблема масштабирования адаптивной верстки на мобильных браузерах
Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…
Наверное, все кто занимался адаптивной версткой (да и не только адаптивной), знают, что при отображении сайта на мобильной версии браузера (скажем, на размере экрана в ширину 480 точек), сайт не отображается в масштабе 1:1, а «ужимается» под размер окна браузера. Т.е. браузер уменьшает сайт до такого размера, чтобы он целиком уместился в окно браузера. Элементы сайта становятся мелкими, шрифты не читабельными. И пользователю приходится увеличивать (масштабировать) его вручную. Но меня то не устраивает такая ситуация. Я то делал адаптивную верстку с надеждой, что она отобразится в браузере в своем реальном размере и сожмется не за счет масштабирования страницы под размер окна, а именно за счет резиновости блоков. Внешний блок () сайта имеет максимальную ширину 900 пикс, с возможностью сжиматься до 320. Блоки внутри так же сжимаются, перестраиваются и т.д. – это не важно, т.к. речь не об этом. Так вот при сжатии окна браузера на ПК, при размере окна меньше 900 пикс, сайт начинает успешно сжиматься за счет прописанных в css размерах в процентах, медиа-запросов и т.д… А при открытии его на мобильном устройстве он остается в своих реальных размерах и пропорциях, но просто масштабируется до такой степени, чтобы уместиться в окно браузера.
Еще раз повторюсь, что проблема не нова, и возможно многим верстальщикам знакома и может я зря так разжевываю, но все же на всякий случай постарался описать подробно.
И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport
который говорит браузеру, что сайт должен отображаться как есть, не масштабироваться автоматически при первоначальной загрузке (потом пальцами, конечно, можно масштабировать, если не запретить это в том же мета-теге). И если, например, это не адаптивный сайт и ширина его больше ширины окна браузера, то он, конечно же, не уместится целиком, пользователю нужно будет либо уменьшать (масштабировать вручную) либо прокручивать. А если это адаптивный сайт, то он, как и было задумано верстальщиком, сожмется за счет резиновости блоков до ширины окна. Что в итоге и произошло с моим сайтом.
Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.
Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).
Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.
Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.
В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?
Короче говоря, хотелось бы поинтересоваться у сообщества, сталкивался ли кто-нибудь с подобными проблемами. И можно ли это считать проблемой? Или это нормальное поведение, которое не нужно никак исправлять? Т.е. отобразился сайт в реальном масштабе. Если не занял весь экран, то клиент без проблем увеличит его уже пальцами, смасштабирует как надо?
Пытался найти способ как сделать так, чтобы при размере экрана меньше 900 пикс, viewport срабатывал бы, а при размере больше 900 пикс не срабатывал. Не нашел.