Верстка под мобильные IPhone разный размер

maxixmaxix · July 2, 2012

Недавно клиент попросил сделать сайт с респонсив дизайном, кто не знает этот тот который меняется под размер экрана браузера. В основном дизайн под IPhone. Делал все было нормально, но когда начал смотреть на IPhone то оказалось что вертикально выглядит нормально, а горизонтально почему-то все в 2 раза больше, даже фоны увеличились.

Прошу помочь решить проблему с размером содержимого под горизонтальное положение айфона. У кого есть айфоны могут протестировать и увидить все глюки, как все не работает.

Вот ресурс который разрабатываю на под домене: http://wearefaces.prografika.com.ua/

Вот пример того что дал клиент как образец с красивым меню: http://mobiento.com/blog/in-progress/

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

Спасибо всем кто откликнется. К стати бывает работа для верстальщиков и программистов, по этому поводу пишите в личку.

Radiocity · July 3, 2012

Нужно было требовать с заказчика IPhone для тестов. Он бы сразу отказался от этой дурной затеи =)

Svatov · July 3, 2012

пропиши в стилях


-webkit-text-size-adjust: none;

Svatov · July 7, 2012

-webkit-min-device-pixel-ratio

Забыл о довольно важном еще аспекте...это Retina дисплеи...может статься, что ваши изображения могут смотреться на таких дисплеях размыто и нечетко. Для этого прийдется использовать упомянутое мною свойство и следовательно подготовить пак картинок под соотвествующий медиа запрос.

Edited July 7, 2012 by Svatov

Николя223 · July 9, 2012

(Ничего не знаю об айФонах,только гипотеза)))

Не понял суть вопроса, но интуиция подсказывает так:

При переворачивании сего изделия изменяется ширина окна, ==> перезагружается страница, чтобы применить новый стиль

<body onresize="window.location.reload();">

Происходит определение ширины окна браузера и вставка изменений в стилевых таблицах.


<HTML>
<BODY>
  ...
<STYLE>
  ...
</STYLE>
  ...

  ...
<script language="JavaScript1.2">
if (window.innerWidth >=500 ){
document.write('<STYLE>Новыя разметка</STYLE>');
document.write('<STYLE>Новыя разметка2</STYLE>')
}
</script>
</BODY>
</HTML>

Edited July 9, 2012 by Николя223

maxixmaxix · May 1, 2013

Все получилось, результат можно посмотреть тут: wearefaces.com. В результате все вышло и много чему научился.

Sign In

Верстка под мобильные IPhone разный размер

Question

maxixmaxix

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Radiocity

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

Svatov

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

maxixmaxix

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information