Тому хочу поділитися зі своїми читачами (якщо такі є) деякими основними принципами, про які слід пам'ятати при верстці.
Більшість пристроїв, на які слід орієнтуватися працюють під управлінням Android або iOS, а роздільна здатність екрану може сильно варіюватися від 240х320 до 2048x1536.
Основна особливість всіх цих пристроїв - сенсорний тип введення даних. Звідси перші кілька наслідків:
1) Не використовувати подія і параметр hover, який може спрацьовувати некоректно.
2) Не можна використовувати внутрішній скролінг блоків (автоматично він не обробляється), це можна зробити на JS, перехоплюючи подія дотику, але
3) Не слід перехоплювати подія дотику для великих блоків, здатних зайняти весь екран
так як це завадить масштабування як 2 пальцями, так і подвійним дотиком (ці події будуть перехоплені і оброблені не як масштабування)
Основною проблемою ж на тому сайті було навіть не це. Там використовувалися блоки з фіксованим позиціонуванням, яка не прийнятно при верстці під мобільні пристрої.
4) Не можна використовувати фіксоване позиціонування блоків або фону
Останнім наслідок того, що екран мобільного пристрою значтельно менше і для читання застосовується масштабування, а фіксовані блоки приймають облостях огляду під "екран", намагаючись на ньому розміститися.
І остання особливість, яку хочу відзначити -
5) Відсутність події scroll
Це відбувається внаслідок того, що сторінка відображається як би "повністю", а ми просто переміщаємо "екран огляду" або на зразок того, суть в тому що подія scroll на мобільних пристроях не викликається. А отже його використовувати не можна.
Найдовше довелося проводитися зі збільшенням масштабу при повороті iPad. Після повороту iPad з горизонтального у вертикальне положення, збільшувався масштаб, що виглядало некоректно. А вирішується це дуже просто:
Замість 1000 Наступний вказати розмір блоку для відображення. Наприклад, якщо у вас блог з фіксованою шириною 720px, то вам слід замінити 1000 Перейти до 720. =)
І пара корисних "фішок" для подібних пристроїв:
внутрішній скролінг блоків (потрібно враховувати 2 і 3)