Начальный масштаб = 1,0 + ширина = ширина устройства не умещается на весь экран на любом мобильном

Так что я прямо сейчас в замешательстве. Я создаю адаптивный сайт, используя тему "Деликатный". Он встроен в метатег

То, что у меня сложилось впечатление, установит весь контент на ширину экрана. На моем телефоне я должен уменьшить масштаб, чтобы контент отображался довольно красиво. Я попытался изменить начальное значение масштаба на 0,65, что сделало сайт красивым на моем личном телефоне, который я использую для разработки, но он не очень хорошо работает на iphone 6 или других устройствах.

Я бьюсь лицом о стену, поэтому любой совет будет очень признателен

Источник

2 ответа

Решение

Проблема в том, что основной контейнер имеет фиксированную ширину, а не адаптивную ширину в зависимости от экрана. Я думаю, что тема дерьмо!

Вот исправление:

*,
*:before,
*:after {
  margin: 0pt; 
  padding: 0pt;
  box-sizing: border-box;
}

.content-pad {
  width: 100%;
}

Чтобы быть более конкретным, вы должны применять это правило только к маленьким устройствам, например так:

/* Apply this width only to small devices */

@media only screen and (min-width: 320px) {
  .content-pad {
    width: 100%;
  }
}

Убедитесь, что вы изменили ширину темы по умолчанию или добавили !important по ширине из-за специфичности css.

Источник

initial-scale=1, кажется, ломает больше, чем исправляет. Я просто использую:

<meta name='viewport' content='width=device-width'>

Что дает мне желаемое соответствие по ширине. Настольные браузеры в порядке, Android на Chrome теперь идеален в обеих ориентациях, как и Silk на Kindle. Я не тестировал на IOS (который является новым IE6, IMHO), но я буду взламывать конкретное исправление для этого, если понадобится.

Источник
Другие вопросы по тегам