Блог

Я не силен в адаптивных материалах, я разработал свой сайт для высоких результатов, поэтому, когда я пытаюсь использовать его с низким результатом, он выглядит плохо, я исправил его для Google Chrome с помощью:

  body {
     zoom: 80%;           
 }
 

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

Спасибо

Существует несколько способов размещения мобильных / планшетных устройств на вашем веб-сайте.

ИСПРАВЛЕН ДИЗАЙН

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

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

ПЛЮСЫ

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

МИНУСЫ

Если на вашем сайте большое количество контента на странице, ваш сайт может стать очень тесным на небольших устройствах

АДАПТИВНЫЙ ДИЗАЙН

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

ПЛЮСЫ

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

МИНУСЫ

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

СОЗДАНИЕ АДАПТИВНЫХ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ

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

• Используя метатег окна просмотра, как в вашем примере, для таргетинга на устройство, которое обращается к вашему веб-сайту.

  <meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

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

• Использование медиа-запросов.

Медиа-запросы позволяют вам писать отдельные правила для определенной ширины экрана.

 /* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 

• Используя Javascript.

Хорошим решением для javascript, отличным от bootstrap, является jquery mobile, который отнимает время и усилия на разработку адаптивного сайта, выполняя работу за вас. Вам не нужно знать или редактировать какой-либо javascript, чтобы использовать его.