Как выглядит сайт на мобильном устройстве


Как выглядит Ваш сайт на мобильных устройствах?

Как выглядит Ваш сайт на мобильных устройствах? Данный сервис поможет Вам быстро составить представление о том, как выглядит Ваш сайт на популярных мобильных устройствах. Конечно, это не симулятор, и в точности оценить настоящий вид можно только используя реальный девайс. Почитайте, что такое адаптивный Веб-дизайн, чтобы понять, как сделать Ваш сайт удобным в использовании с любого мобильного устройства.
Хотите сделать Ваш сайт более "дружным"? Звоните (032) 242-33-39 или просто свяжитесь с нами!

Режим статической ширины

Если Ваш сайт не адаптивный, и имеет статически заданную ширину, используйте режим статической ширины. Для этого добавьте параметр &width=x, где х - ширина Вашего сайта в пикселях. Например: http://www.webmark.com.ua/mobile/?url=webmark.com.ua&width=1024

iPhone вертикально 320 x 480

iPhone горизонтально 480 x 320

Android вертикально 240 x 320

Android горизонтально 320 x 240

Android вертикально (новый) 295 х 515

Android горизонтально (новый) 515 х 295

iPad вертикально 768 x 1024

iPad горизонтально 1024 x 768

Kindle вертикально 600 x 1024

Kindle горизонтально 1024 x 600

веб-сайтов для предварительного просмотра на разных телефонах

Страна

Выберите countryUnited StatesUnited KingdomAustraliaCanadaGermanyFranceSpainAfghanistanAlgeriaAngolaAntigua и BarbudaArgentinaArmeniaAustriaAzerbaijanBahrainBangladeshBarbadosBelarusBelgiumBeninBosnia и HerzegovinaBrazilBruneiBulgariaBurkina FasoCambodiaCameroonCape VerdeChadChileChinaColombiaComorosCosta RicaCote d'IvoireCroatiaCyprusCzechiaDemocratic Республику CongoDenmarkDjiboutiDominicaDominican RepublicEcuadorEgyptEl SalvadorEritreaEstoniaEswatiniEthiopiaFederated Штаты MicronesiaFijiFinlandFrench PolynesiaGabonGeorgiaGhanaGreeceGrenadaGuamGuatemalaGuineaGuyanaHaitiHong KongHungaryIcelandIndiaIndonesiaIraqIrelandIsraelItalyJamaicaJapanKazakhstanKenyaKuwaitKyrgyzstanLaosLatviaLebanonLesothoLiberiaLibyaLithuaniaLuxembourgMadagascarMalawiMalaysiaMaltaMauritaniaMauritiusMexicoMoldovaMongoliaMontenegroMoroccoMozambiqueMyanmar (Бирма) NamibiaNepalNetherlandsNew CaledoniaNew ZealandNicaraguaNigerNigeriaNorth MacedoniaNorthern Марианской IslandsNorwayPakistanPalauPanamaPapua Новый GuineaParaguayPeruPhilippinesPolandPortugalQatarRomaniaRussiaRwandaSaint Киттс и NevisSaint Винсент и GrenadinesSamoaSao Томе и PrincipeSaudi ArabiaSenegalSerbiaSierra LeoneSingaporeSlovakiaSloveniaSolomon IslandsSomaliaSouth AfricaSouth KoreaSri LankaSurinameSwedenSwitzerlandTaiwanTajikistanTanzaniaThailandThe GambiaTogoTongaTunisiaTurkeyTurkmenistanUgandaUkraineUnited Арабские EmiratesUruguayUzbekistanVanuatuVenezuelaVietnamYemenZambiaZimbabwe

.

jquery - есть ли способ проверить, как мой сайт будет вести себя и как будет выглядеть на мобильном устройстве, с помощью браузера для настольных ПК?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
.

Адаптивный дизайн в CSS (thesitewizard.com)

Использование медиа-запросов и области просмотра для мобильного дизайна


Кристофер Хенг, thesitewizard.com

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

Предварительные требования

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

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

Адаптивный веб-дизайн

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

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

Преодоление настроек мобильного устройства по умолчанию: окно просмотра

В целях этой статьи, чтобы избежать необходимости уточнять все, что я говорю, делая вещи еще более многословными, чем нужно, Я буду использовать следующее сокращение. Когда я говорю здесь «настольный» или «компьютер», я имею в виду настольный или портативный компьютер, а не смартфон или планшет (хотя последние два тоже компьютеры). И когда я говорю «мобильное устройство», я имею в виду мобильный телефон, планшет с маленьким экраном и т.п., а не портативный компьютер (хотя последний тоже портативный).Без этого сокращения статью будет еще труднее читать, чем сейчас, с несколькими предложения просто, чтобы объяснить, что я имею в виду, когда говорю эти термины. Я также склонен использовать «смартфон» как синоним «мобильное устройство». здесь, чтобы статья не казалась слишком однообразной.

Браузеры современных мобильных телефонов написаны с учетом того, что веб-сайты традиционно разрабатывались для компьютеров. мониторы. Таким образом, он приспосабливается, делая вид, что веб-сайт имеет экран размером с компьютер, и масштабирует все, чтобы оно соответствовало. в этом.Например, Safari на iPhone 5 делает вид, что у него по умолчанию ширина экрана 980 пикселей, хотя реальный размер - 320 пикселей (в портретном режиме). Итак, если вы разрабатываете веб-сайт с фиксированной шириной (скажем) 730 пикселей, вся его ширина уместится на экране вашего мобильного телефона, даже если последний не такой широкий. Браузер выполняет это за счет уменьшения размера вашего веб-сайта, чтобы все стало очень маленьким. Если пользователю нужно что-то прочитать, им придется увеличивать соответствующие части.Вы можете увидеть этот эффект, перейдя в Демонстрационная страница фиксированной ширины на вашем смартфоне. Эта конкретная страница имеет фиксированную ширину 730 пикселей и специально разработана так, чтобы не адаптироваться к вашему использование мобильного телефона.

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

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

Если вы хотите быть ориентированными на будущее, вам теоретически необходимо добавить эквивалентный код CSS в свою таблицу стилей.

@viewport {
ширина: ширина устройства;
зум: 1,0;
}

Вышеупомянутый метод санкционирован в предлагаемых стандартах CSS (т. Е. Фактически еще не ратифицирован).Поскольку такие вещи, как ширина и способ представления веб-страницы, на самом деле являются правилами стиля, они по праву принадлежат таблица стилей вместо метатега в HTML. К сожалению, в то время, когда я писал это, на самом деле ни один веб-браузер реализует его прямо из коробки. Microsoft и Google имеют в своих браузерах экспериментальный код, который его поддерживает, но он должен быть явно включен конечным пользователем.

Если вы хотите протестировать его в Internet Explorer 10, 11 и Microsoft Edge, потому что вы включили средство в свои предпочтения, вы также должны добавить следующее.(Свойство масштабирования еще не реализовано.)

@ -ms-viewport {
ширина: ширина устройства;
}

Префикс « -something- » (например, « -ms- » для Microsoft, « -webkit- » для Google, " -moz- " для Mozilla и т. Д.) - это метод, используемый поставщиками браузеров для добавления поддержки экспериментальных вещей, которые пока официально не добавлены в стандарты. Они делают это потому, что если они добавят, скажем, @viewport преждевременно, с использованием метода предварительных стандартов, который все еще обсуждается и обсуждается, и окончательный стандарт в конечном итоге заканчивается различное значение для этих свойств, то веб-сайты, которые зависят от предварительного стандарта написания @viewport сломает.Это приводит к нечестивому беспорядку, когда производители браузеров должны решать, как интерпретировать правила на веб-сайте. поскольку некоторые сайты будут полагаться на предстандартную семантику, а другие - на официальную. И веб-мастера не будут могут решить проблему, кодируя вещи так или иначе, поскольку они не могут контролировать, посетители используют браузер до или после стандартов. Поэтому решение состоит в том, чтобы предложить версию с префиксом, и включить только тот, без префикса, когда стандарты будут установлены.

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

Ключ, который открывает адаптивный дизайн в CSS: медиа-запросы

Теперь, когда у нас есть браузер мобильного телефона, чтобы воздерживаться от изменения размеров вещей за нашей спиной, мы должны адаптироваться к его маленький экран вручную.Хотя это кажется шагом назад, на самом деле это позволяет нам более подходящим способом, чем автоматическое устройство телефона: например, мы можем изменить размер вещей, которые могут быть измененный размер (например, изображения), оставляя в покое другие, размер которых не должен изменяться (например, слова). Чтобы освободить для этого место, мы можем отправлять не столь важные элементы в нижнюю часть экрана. Например, если вы прочитаете какой-нибудь в статье на сайте thesitewizard.com, включая эту, на мобильном телефоне, вы обнаружите, что мое меню навигации (т. е. список кнопок), который обычно находится в левом столбце в браузере рабочего стола, располагается внизу страницы. на смартфоне.Я решил, что, поскольку пользователь находится на этой странице, его основная цель - прочитать статья. Поэтому я помещаю статью вверху, чтобы посетители могли сразу к ней перейти.

Чтобы совершить подобную магию, нам нужен способ определения размера экрана. Современные браузеры предоставляют эту возможность в виде «медиа-запроса».

Медиа-запрос в таблице стилей выглядит примерно так:

@media screen и (max-width: 320px) {
/ * CSS для экранов размером 320 пикселей или меньше будут помещены в этот раздел * /
}

Любой CSS, заключенный в фигурные скобки теста « @media screen и (max-width: 320px) », будет применимо только к экранам с максимальной шириной 320 пикселей.Вы, конечно, не ограничены тестированием шириной 320 пикселей. Последнее - просто фигура, которую я выбрал для этого примера. Вы можете протестировать min-width и max-width любого размера. Вы даже можете проверить диапазон размеров, например, в следующем коде.

@media screen и (min-width: 320px) и (max-width: 640px) {
/ * для экранов шириной не менее 320 пикселей, но не более 640 пикселей * /
}

Правила CSS, не заключенные в раздел « @media », применяются ко всем.И код, который прилагается в конкретном разделе « @media » будет использоваться только при выполнении условий запроса. Если у вас есть несколько условий, которые должны выполняться одновременно, соедините их с « и », как в приведенных примерах. У вас может быть несколько блоков медиа-запросов, каждый из которых будет применяться только при выполнении условий для этого блока.

/ * код, который здесь, до первого блока @media, будет применяться к любому размеру экрана * /
#somethingorother {
ширина: 800 пикселей;
}

@media screen и (max-width: 320px) {
/ * вступает в силу для экранов, размер которых меньше или равен 320 пикселей * /
#somethingorother {
width: 120px;
}
}
@media screen и (min-width: 321px) и (max-width: 480px) {
/ * вступает в силу для экранов от 321 до 480 пикселей (включительно) * /
#somethingorother {
width: 320 пикселей;
}
}
@media screen и (min-width: 481px) {
/ * вступает в силу для экранов размером не менее 481 пикселя * /
#somethingorother {
width: 480px;
}
}

/ * приведенный здесь код будет применяться к любому размеру экрана * /

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

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



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

Тестирование портретного и ландшафтного режима с помощью медиа-запросов

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

экран @media и (ориентация: книжная) {
/ * ... * /
}
экран @media и (ориентация: альбомная) {
/ * ... * /
}

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

Другие полезные функции в медиа-запросах

Помимо вышеуказанного, вы также можете вставить тесты для минимальной высоты (т. Е. Минимальной высоты), максимальной высоты (максимальная высота), ширина и высота .

Кроме того, вы можете начать медиа-запрос с « только », как показано в следующем фрагменте:

Только экран @media и (max-width: 480 пикселей) {
/ *... * /
}

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

Если вы хотите использовать CSS для всех ситуаций, кроме случаев, когда выполняются определенные условия, вы можете использовать " not " перед вашим условием, как в следующем примере.

@media not (max-width: 639px) {
/ * Правила CSS для любого устройства, ширина которого превышает 639 пикселей * /
}

(Обратите внимание, что, поскольку я не указал « экран » в приведенном выше примере, это подразумевает « все » что означает все устройства.)

Однако будьте осторожны, «not» обрабатывается как «только» в очень старых браузерах.То есть он будет интерпретироваться как тип устройства и поэтому стили в следующем блоке применяться не будут.

Разрешение / ширина экрана мобильного устройства

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

  • 240 пикселей (старый портретный режим Android)
  • 320 пикселей (iPhone 3-5 и iPhone SE в портретном режиме)
  • 375 пикселей (iPhone 6, 6s, 7, 8 и X портрет)
  • 384 пикселя (Android Nexus портрет)
  • 414 пикселей (iPhone 6 Plus, 6s Plus, 7 Plus и 8 Plus, портретная ориентация)
  • 480 пикселей (iPhone 3 и 4 альбомный режим)
  • 568 пикселей (iPhone 5 и iPhone SE в горизонтальной ориентации)
  • 600 пикселей (Android Nexus в альбомной ориентации, Kindle в портретной ориентации)
  • 667 пикселей (iPhone 6, 7 и 8, альбомная ориентация)
  • 736 пикселей (iPhone 6 Plus, 7 Plus и 8 Plus в альбомной ориентации)
  • 768 пикселей (iPad портрет)
  • 812 пикселей (iPhone X, альбомная ориентация)
  • 1024 пикселей (iPad, альбомная ориентация)

На сайте мастера.com, я рассматриваю всю ширину экрана выше 629 пикселей как достаточную для моей двухколоночной схемы. Приведенные ниже разрешения получают один столбец, при этом столбец навигации (левый столбец) сдвинут вниз. экрана. Вы можете увидеть эффект моих мобильных правил CSS, даже если вы находитесь на рабочем столе: просто измените размер вашего в окне браузера находится именно эта статья, которую вы читаете. Если вы уменьшите ширину меньше 629 пикселей, вы получите единственный столбец, который видят мобильные пользователи.

Обратите внимание, что вам не обязательно следовать моей системе разделения CSS на 629 пикселей.Это просто цифра, которую я использовал потому что, похоже, он отлично работает с контентом thesitewizard.com. На самом деле, если я правильно помню, я видел сайт, переключился на мобильный макет только на 480 пикселей, а другой переключился на разные макеты в зависимости от того, Экран имел 940, 640 или 520 пикселей по горизонтальной оси. Я рекомендую вам не слепо следить за размером других сайтов условия: используйте номер, соответствующий вашему содержанию, протестируйте и измените его соответствующим образом.

Совместимость с веб-браузерами

Средство медиа-запросов, которое позволяет нам тестировать размер экрана, появилось позже на сцене веб-браузера.То есть CSS существовал уже много лет, прежде чем в стандарт были включены средства условного применять определенные правила к определенным размерам экрана. Таким образом, очень старые браузеры не поддерживают эти функции.

Что касается смартфонов, насколько мне известно, медиа-запросы поддерживаются только в браузерах Android, начиная с с версией 2.1, на iPhone Safari 3.2 и новее, Blackberry 7 и новее, Opera Mobile 12 и новее, Opera Mini 8, и Internet Explorer («IE») для мобильных устройств 10 и более поздних версий.

Что касается браузеров для настольных ПК / ноутбуков, поддержка, похоже, началась с IE 9, Firefox 3.5, Safari 4 и Chrome 4. Поскольку Microsoft Edge изначально был основан на коде IE 11, он всегда имел поддержку медиа-запросов.

Учитывая вышесказанное, насколько безопасно использовать медиа-запросы на вашем сайте?

  • Многое зависит от демографии вашего сайта. Например, если на вашем сайте много люди, использующие телефоны с IE mobile 9 и более ранними версиями, вероятно, захотят поддержать их.

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

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

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

Следующая глава

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

Авторские права © 2016-2020 Christopher Heng. Все права защищены.
Получите больше бесплатных советов и подобных статей, по веб-дизайну, продвижению, доходам и написанию сценариев с https://www.thesitewizard.com/.

.

Помогите! Мой сайт WordPress для мобильных устройств выглядит иначе

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

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

Хотите оптимизировать свой WordPress для мобильных устройств?

Прочтите, если вам интересно: «Почему мой сайт WordPress по-другому выглядит на мобильных устройствах?»

Оцените услуги адаптивного веб-дизайна WebFX

Что такое адаптивный дизайн?

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

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

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

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

Если ваш сайт полностью не отвечает, он будет выглядеть точно так же, как ваш компьютер, но у вас возникнут проблемы с удобством использования, которые не позволят мобильным пользователям оставаться на связи. Пользователи на 52% реже взаимодействуют с компанией с плохой мобильной версией своего сайта.

Итак, сначала проверьте свой сайт, чтобы убедиться, что он адаптируется.

Почему моя тема плохо выглядит на мобильном телефоне? Задайте себе эти вопросы, чтобы узнать

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

Если вы задаетесь вопросом «почему моя тема плохо смотрится на мобильных устройствах», вот четыре вопроса, которые следует задать себе, чтобы выяснить, почему, а также как сделать ваш сайт WordPress более удобным для мобильных устройств.

У вас есть отзывчивая тема?

Если у вас нет темы WordPress для мобильных устройств, важно, чтобы она у вас была. Ваша тема WordPress - это самый простой способ конвертировать веб-сайт WordPress в мобильный.

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

Горизонтальная настройка рабочего стола не слишком хорошо подходит для вертикального мобильного экрана.А из-за разницы в размерах ваш сайт будет казаться крошечным на мобильном устройстве, что серьезно скажется на пользовательском опыте (UX).

И хотя тема, адаптированная для мобильных устройств, не будет выглядеть на 100% одинаково как на компьютере, так и на мобильном устройстве, поскольку многие элементы помещаются в один столбец, это изменение имеет большое значение, поскольку оно улучшает UX вашего сайта на мобильных устройствах. Это означает, что у ваших зрителей будет более доступное и интересное время для просмотра вашего сайта на любом устройстве.

> Как сделать ваш сайт WordPress мобильным с помощью адаптивного дизайна:

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

Вы также можете просмотреть свой сайт в режиме разработчика, используя Ctrl + Shift + I или щелкнув правой кнопкой мыши и выбрав «Проверить».

Если ваша тема не адаптируется, найдите такую ​​и обновите свой сайт. Хорошая адаптивная тема не заставит ваш сайт WordPress плохо выглядеть на мобильных устройствах.

Как и темы, некоторые плагины могут не реагировать. Проверьте, нет ли они.

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

Замените не отвечающие плагины на адаптивные плагины, которые выполняют ту же задачу.

Масштабируется ли ваше медиа?

Если медиа на вашем сайте не масштабируется, это может сделать мобильную версию вашего сайта WordPress неуклюжей.

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

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

Взгляните на этот мужской магазин одежды, занимающийся электронной коммерцией, Stag Provisions, который ищет на мобильных устройствах.

Как сделать ваш сайт wordpress удобным для мобильных устройств, сделав контент масштабируемым:

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

Вы можете сжимать свои файлы с помощью таких сайтов, как Kraken.io или ShortPixel (на обоих есть плагины WordPress). Сжатие медиафайлов повысит скорость загрузки страниц как на компьютере, так и на мобильном устройстве.

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

Вы используете ускоренные мобильные страницы (AMP)?

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

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

Создание кешей AMP для вашей страницы:

  • Сделайте вашу страницу выше на поисковых страницах Google
  • Обеспечивает более высокую скорость загрузки на мобильных и настольных компьютерах
  • Сделайте пользователям удобнее

Итак, это стоит реализовать для вашего сайта WordPress.

Как сделать ваш сайт wordpress удобным для мобильных устройств с помощью AMP:

Плагин AMP является официальным плагином AMP для WordPress, но есть также плагин AMP для WP, оба популярных плагина для реализации AMP на вашем сайте WordPress.

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

Вы используете плагины для мобильных тем?

Плагин Jetpack - это бесплатный плагин безопасности WordPress от Automattic. Он не только защищает ваш сайт, но и помогает оптимизировать его для SEO и создавать привлекательный контент.

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

В

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

Кроме того, некоторые плагины, такие как WPtouch, работают аналогично модулю мобильной темы Jetpack.Плагин WPtouch создает отдельную тему для мобильной версии вашего сайта, поэтому, если у вас включен этот плагин, ваши мобильные и настольные версии будут выглядеть по-разному.

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

Как сделать ваш сайт wordpress удобным для мобильных устройств, отключив Jetpack:

Вы можете отключить модуль, перейдя по этому пути к файлу на панели инструментов WordPress.

  • Jetpack> Настройки> вкладка Запись
  • Прокрутите вниз до «Улучшения темы»
  • Отключите «Включить тему Jetpack Mobile».

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

Станьте партнером WebFX, компании, занимающейся адаптивным веб-дизайном!

Когда WebFX разрабатывает ваш веб-сайт, мы с самого начала делаем его адаптивным. Просто ознакомьтесь с нашим отмеченным наградами портфолио из более чем 1000 веб-сайтов, которые мы создали для таких клиентов, как вы!

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

Если на вашем веб-сайте WordPress что-то не работает, мы устраним неполадки, чтобы вам больше никогда не приходилось задаваться вопросом: «Почему мой сайт WordPress выглядит иначе на мобильных устройствах».

Свяжитесь с нами онлайн или позвоните нам по телефону 888-601-5359 , чтобы поговорить с одним из наших специализированных веб-дизайнеров WordPress! Мы поможем вам выяснить, почему ваш веб-сайт не выглядит так, как вы хотите.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий