Я пишу веб-приложение для использования на мобильных сенсорных устройствах, для начала я сконцентрировался на ipad. Приложение будет содержать сетку миниатюрных фотографий, похожих на изображения Google.
Я действительно борюсь с макетом этого сайта, я хочу, чтобы миниатюры были расположены на одинаковом расстоянии с полями одинакового размера по краям.
Я пробовал несколько методов, но столкнулся с проблемами со всеми из них.
1. Я попытался спроектировать сайт с фиксированной шириной 960 пикселей и выложил миниатюры и их поля симметрично для этой ширины. Это работало до некоторой степени, но ipad по умолчанию устанавливает ширину браузера в 980 пикселей, поэтому пустое пространство по краям было больше, чем мне бы хотелось.
2. То же, что и выше, но я также указал:
<meta name="viewport" content="width=960, user-scalable=no" />
Теперь все выглядит так, как и должно быть на ipad (в портретной ориентации), в пейзаже все не так плохо (я думаю, что миниатюры взорваны и немного пикселированы). Он отлично отображается на рабочем столе, но на iphone его невозможно использовать, так как все слишком мало.
3. Чтобы обойти вышеупомянутую проблему, и как предложено яблоком сами Я попытался поменять вышеприведенное с:
<meta name="viewport" content="width=device-width" />
При этом я получаю разумную шкалу как для iPhone, так и для iPad, но проблема в том, что я не могу добиться пиксельного совершенства на своих макетах, пробелы на левом и правом краях экрана не равны (потому что я Я имею дело с сеткой изображений фиксированной ширины, которые не помещаются целое число раз в доступное пространство)
Может кто-нибудь предложить лучший подход, пожалуйста, я подумал об использовании javascript для настройки макета, но предпочел бы не идти по этому пути.
Спасибо