Jump to content
  • 0

Горизонтальное отображение сайта в айпад


okunev2
 Share

Question

Столкнуля с проблемой, при вертикальном просомтре сайта в Ipad он помещается полностью без прокрутки, а вот при горизонтальном нет. Рабочее разрешение макета сайта 973 на 970. А вот у ipad другое разрешение. Как сжать можно сайт под айпад, т.е. чтоыб он не тоьок при вертикальном просмотре полностью помешался но и при горизонтальном без промотки, есть какой-то костыль или инструмент? Делать скейл макета сайта на 10% не вариант

 

Вот пациент архив

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

А давайте вы не архив выложите, а сайт покажете нормально, на хостинге, по-взрослому. А то мне, например, лень качать-устанавливать, а просто зайти и посмотреть — не лень.

Link to comment
Share on other sites

  • 0
  On 1/26/2015 at 10:53 PM, Z1gnet said:

ну какой инструмент? делайте респонсив. или вам нужна кнопка которая все пофиксит?)

 

Про респонсив я в курсе. Вот по высоте для горизонтали ipad не видел чтоб кто-то верстал. Или поправьте меня, я не прав.

Link to comment
Share on other sites

  • 0
  On 1/26/2015 at 7:11 PM, Veseloff said:

А давайте вы не архив выложите, а сайт покажете нормально, на хостинге, по-взрослому. А то мне, например, лень качать-устанавливать, а просто зайти и посмотреть — не лень.

 

http://makket.500mb.net/index.html

Link to comment
Share on other sites

  • 0
  On 1/27/2015 at 6:31 AM, okunev2 said:
Вот по высоте для горизонтали ipad не видел чтоб кто-то верстал. Или поправьте меня, я не прав.

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

Link to comment
Share on other sites

  • 0
  On 1/26/2015 at 5:41 PM, okunev2 said:
есть какой-то костыль или инструмент

Есть: медиа-запросы с указанием высоты.

 

 

 

  On 1/27/2015 at 6:31 AM, okunev2 said:
Вот по высоте для горизонтали ipad не видел чтоб кто-то верстал. Или поправьте меня, я не прав.

Потому что на фиг оно нужно. Я понимаю если у нас какой-то промосайт, который должен умещаться полностью в экране браузера (но понятно что минимальная высота должна быть какая-то всё равно), в иных случаях это имитация бурной вёрстки.

 

В данном случае у вас не понимаю зачем верстать под высоту, у вас всегда что ли весь контент на экране будет?

Edited by antonKar
Link to comment
Share on other sites

  • 0
  On 1/27/2015 at 3:37 PM, Great Rash said:

А вы залочьте просто отображение на вертикальное :) Чтоб горизонтально не поворачивалось.

 

Не катит

  On 1/27/2015 at 2:46 PM, antonKar said:

 

  On 1/26/2015 at 5:41 PM, okunev2 said:
есть какой-то костыль или инструмент

Есть: медиа-запросы с указанием высоты.

 

 

 

  On 1/27/2015 at 6:31 AM, okunev2 said:
Вот по высоте для горизонтали ipad не видел чтоб кто-то верстал. Или поправьте меня, я не прав.

Потому что на фиг оно нужно. Я понимаю если у нас какой-то промосайт, который должен умещаться полностью в экране браузера (но понятно что минимальная высота должна быть какая-то всё равно), в иных случаях это имитация бурной вёрстки.

 

В данном случае у вас не понимаю зачем верстать под высоту, у вас всегда что ли весь контент на экране будет?

 

 

Контент всегда будет на экране

Link to comment
Share on other sites

  • 0
  On 1/27/2015 at 2:46 PM, antonKar said:

 

  On 1/26/2015 at 5:41 PM, okunev2 said:
есть какой-то костыль или инструмент

Есть: медиа-запросы с указанием высоты.

 

 

 

  On 1/27/2015 at 6:31 AM, okunev2 said:
Вот по высоте для горизонтали ipad не видел чтоб кто-то верстал. Или поправьте меня, я не прав.

Потому что на фиг оно нужно. Я понимаю если у нас какой-то промосайт, который должен умещаться полностью в экране браузера (но понятно что минимальная высота должна быть какая-то всё равно), в иных случаях это имитация бурной вёрстки.

 

В данном случае у вас не понимаю зачем верстать под высоту, у вас всегда что ли весь контент на экране будет?

 

 

 

И как через "Есть: медиа-запросы с указанием высоты." Это вылечить?

  On 1/27/2015 at 3:37 PM, Great Rash said:

А вы залочьте просто отображение на вертикальное :) Чтоб горизонтально не поворачивалось.

 

как?

Link to comment
Share on other sites

  • 0
  On 1/28/2015 at 5:20 PM, okunev2 said:
И как через "Есть: медиа-запросы с указанием высоты." Это вылечить?

 

 @media screen and (max-height: 768px) {

/*и поехали*/
}

 

Либо через JS определяйте, что у вас ipad (только у нас как бы и иные планшеты есть), определяйте у него горизонтальную ориентацию и применяйте transform к body.

Link to comment
Share on other sites

  • 0
  On 1/28/2015 at 5:20 PM, okunev2 said:
  On 1/27/2015 at 3:37 PM, Great Rash said:

А вы залочьте просто отображение на вертикальное :) Чтоб горизонтально не поворачивалось.

 

как?

Очень просто :)

@media all and (orientation: landscape) {  body {    -webkit-transform: translate3d(0, 0, 0) rotate(-90deg);    transform: translate3d(0, 0, 0) rotate(-90deg);  }}
  • Like 1
Link to comment
Share on other sites

  • 0
  On 1/28/2015 at 7:30 PM, antonKar said:
Либо через JS определяйте, что у вас ipad (только у нас как бы и иные планшеты есть), определяйте у него горизонтальную ориентацию и применяйте transform к body.

 

 

не понял, т.е. трансформ для боди?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy