Вы можете предложить мне работу

Однажды я набил себе шишек в создании отзывчивых сайтов, затем ещё раз; а теперь набил так сильно, что решил записать выводы на память.

  1. Пользуйтесь эмуляторами:
  2. max-device-width при смене ориентации может уже не работать, равно как и max-device-height.
  3. Если делаете адаптивно, то <meta viewport="width=device-witdh" />, иначе <meta viewport="1024px" />, где 1024px можно заменить на максимальную ширину контентной области или меньше.
  4. При смене ориентации портится scale, поэтому либо js-решение, либо так: <meta viewport="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />, но тогда вы должны быть уверены, что у пользователя не возникнет желания зумить ваш сайт.
  5. Чтобы избежать неожиданного изменения размера шрифта только на айфонах и айпадах используйте -webkit-text-size-adjust: 100%;, а не none, чтобы текст можно было масштабировать в десктопных браузерах.
  6. Пользуйтесь ngrok для тестирования локального отзывчивого сайта на мобильных
Все статьи