Как выглядят сайты на экране iPhone X

93

Подавляющее большинство страниц в Интернете не смогут автоматически подстроить верстку под формат дисплея iPhone X. Это признала даже Apple и выпустила для владельцев сайтов специальное руководство, которое подробно рассказывает о том, какие шаги следует предпринять, чтобы веб-сайт самостоятельно адаптировался под еще не вышедший смартфон.

Как и следовало ожидать, основной проблемой для владельцев веб-ресурсов является тот самый наплыв iPhone X, содержащий фронтальную камеру, сенсор Face ID и датчики освещения и приближения. Именно он мешает стандартной работе сайтов, большинство из которых не могут самостоятельно подобрать наилучший формат отображения содержимого.

По умолчанию неадаптированный сайт на экране iPhone X, находящегося в альбомной ориентации, выглядит так:


А так выглядит пример неправильной адаптации, когда некоторые компоненты сайта, подстраиваясь под экранный наплыв, сдвигают другие:

В идеале все должно выглядеть так:

Сравните адаптацию в портретной ориентации:

Лучший комментарий

93 комментария Оставить свой

  1. 43

    Дичь какая-то

  2. 11

    Что то как-то совсем уж… для флагмана, даже с адаптацией. Такое ощущение, что они сами не ожидали 🙁

  3. 3

    А в другую сторону дисплей развернуть нельзя? Чтобы дырка справа была. Не так мешать будет ведь.

  4. 8

    Давно ждал такой прорывной технологии! Побежал заказывать iphone x 🙂

  5. 7

    Да, глаза режет жесть

  6. 4

    😱😱😱

  7. -1

    Apple , прогибает под себя изменчивый мир… Молодцы!! Ведь под режим чтения до сих пор не прогнулись только самые упоротые с полуторами подписчиками.

  8. 9

    Даже до сих пор не могу поверить что они такое выпустили. Сделай эти рамки сверху и снизу одинаковые, закрой датчики и «самолет». Никто даже и не пикнул бы.

    • 2

      Andrey.23, Все пикнули что как у самсунга сделали и точно так же куча недовольных было бы. А так хоть ни на кого не похож

      • -2

        livelife22, Народ походу вообще тупой. Жалуется, что им сверху и снизу чёрные полоски не нарисовали.

        • 4

          foxcross, Сверху полуостров, а снизу закругленные края. Дисплей очень сильно потерял симметрию. Даже на задней камере, микрофон расположен криво) о чем вы говорите?! Сначала посмотрите внимательно на что он похож когда включен дисплей и когда используете контент.
          iPhone 4s шедеврально выглядит на фоне Х )

          • 0

            dazzlebrunet, По поводу микрофона согласен, выглядит очень странно. Но экран по моему очень хорошо получился. Они могли просто сделать полоски как у всех и засунуть время, сигнал итд под них урезая рабочее пространство. А так эти полезные индикаторы показываются по краям рамки и оставляют больше места для контента.

            • 4

              foxcross, Ага, «больше места для контента», ну-ну. Что-то мне подсказывает, что пока в мире доля Iphone X не составит хотя бы 5%, никто не будет заморачиваться пилить под него контент специально, то бишь следующие лет 3-5 этого не будет. Вряд ли думаю Самсунг и китайцы сделают аналогичную убогость. Так что будут счастливые владельцы Х пересылать друг другу эти тупые анимоджи (стоило конечно ради этого новую технологию разрабатывать, ага)

              • 0

                elti2000, Кто не будет контент пилить? Вы посмотрите как Safari работает. Также потом обновят Facebook, Instagram итд. Просто подвинут статус бар в «уши» и все. Ничего сложного.

      • 0

        livelife22, То что сейчас, намного хуже

        Хотя… если выбирать между одними рамками или другими, я предпочту не выбирать вовсе (с)

    • 0

      Andrey.23, гспди, обычный маркетинговый ход, делающий резонанс (хайп)

  9. 11

    Гомно, а не телефон. Жалко что анимированную какашку вставить нельзя😀😀😜😜

  10. 4

    Я думал,что такого не может быть (( . Это совсем не айс!

  11. 9

    Почему нельзя было верхние края оставить для индикаторов в чёрном стиле? Что бы приложения которые не в полноэкранном режиме не налезали на выступающую часть. А те которые в полноэкранном — через sdk. Были бы все довольны и таких проблем не было бы.

    • 1

      wizardion, Раз уж они «никак» не могли сделать верхнюю панель не выступающей, а Ровной!

    • 7

      wizardion, А вот это очень хорошо демонстрирует истинное отношение компании к потребителям. Им по барабану, какой практический смысл-пользу несут их революционные достижения. То есть портрет потребителя для них — поверхностный, неумный, незрелый человек, не знающий цену деньгам. «Они хотят безрамочной игрушки — мы должны им дать эту вещицу» — что-то в этом роде.

      • -1

        danhil, Это бы было бы истинной если бы не одно но! Сам Тим Кук пользуется тоже айфоном, и наверняка он будет юзать iPhone X, неужели ему самому такой дизайн будет удобен? Это ж все равно что если сделать весь телефон полностью без рамок, а в центре экрана поместить чёрный остров с датчиками и придумывать потом «как же обойти это чёрное пятно?»

  12. -6

    На семерке все поплавнее стало. Батарею надо тестить.

  13. 5
    freerider6378

    Мне кажется вживую нужно видеть это все. Да и сам телефон. Уже несколько раз убеждался в этом. И часы не хотел брать и AirPods тоже не хотел. Сейчас радуюсь. Просто разок, попробовав живьём.

    • 0

      freerider6378, Я тоже сначала насмехался над AirPods. А теперь купил и нарадоваться не могу.

      • 2

        guest101, Не пойму чем вы нарадоваться не можете. Звук как в проводных EarPods. Могут потеряться. Трек не переключить нажатием. Дорогущие.

        • 0
          freerider6378

          yura1489, Звук немного лучше в плане низких частот. Потеряться? Нужно постараться их потерять ( в моем ухе сидят как литые), как не прыгал не выпали ни разу. И бегаю в них и на веле катаюсь. Переключить песни можно. С обновлением, вы сами задаёте действие на каждое «ухо» в отдельности. Ну и отдельная фишка это отсутствие проводов, реально удобно. Достал в коробку кинул и в карман. Если с часами в паре работают, то вообще идеально.

        • 0
          freerider6378

          yura1489, А дороговизна- вопрос относительный. Каждый живет по средствам….

  14. 4

    😢😢😢😢😢

  15. 6

    Но ведь это просто ужас, нет?

  16. 5

    Мне лично кажется 🍎 дали слабину. По-любому, изначально они планировали 2 модели с треугольным и пятиугольным неравносторонними дисплеями, но в последний момент струсили и выпустили эту компромиссную фиготень :)) а так была бы бомба!!! Покупаешь два треугольных айфона, складываешь вместе, и на них полностью отображается весь сайт красиво!!!! Любой сайт, Карл, любой!!!

  17. 8

    После этой новости походу будет ещё минус 5% к капитализации

  18. 4

    Смешно )). Выпустить телефон за штуку, главный понт которого не заточен под реальную жизнь. Опозорили своих потребителей. Над которыми и так ржёт весь мир. От зависти, конечно.

  19. 7

    В защиту несчастной компании, однако замечу — нет ничего смешнее, как с банковских карточек владельца андроид-аппарата приложение «фонарик» снимает бабло.

    • 1

      danhil, и правильно делает, нечего на андройдах сидеть 😀

      • 2

        ObamaCare, А я пожалуй на него подсяду через годик. На орео. Поюзаю плотно, буду сюда писать репортажи, каково это ).
        А чем черт не шутит. Вдруг там всё с порядке?
        А ведь это сэкономленные деньги.

        • 0

          danhil, Выброшенные на ветер)

        • 0

          danhil, На андройде и все впорядке вряд ли. По крайней мере 7 от 8 версия мало чем отличается. Да и дизайн системы без кастомов очень уж утомляет:) а с кастомными оболочками работа не стабильная.

  20. 0

    Вообще то большинство сайтов и так этот отступ имеют, если этого отступа нет — верстальщику пора на пенсию.

  21. 3

    Пропущу.

  22. 0

    Ну, у Apple есть собственный поклонник и собственная операционная система. В противном случае он оказался в невыгодном положении

  23. 1

    Не красиво.

  24. 0

    Предлагаю назвать этот Хтелефон Рогачом 🙂 https://ibb.co/k9pnKQ

  25. 0

    на презентации считаю была не правильная адаптация при видео съемке, часть экрана где Х оставить вне поля кадра съёмки, пусть бы там было время или служебные значки от iOS.

  26. 4

    Мерзкий экран. Сделал бы уже эти рога незадействованными в отображении страницы, чтобы там были лишь значки.

  27. -1

    Нихера не понял

  28. 0

    Вместо того, чтоб выпускать инструкцию, лучше бы затемнили выступы. Все остались бы довольны. Бред какой-то (

  29. 4

    Специально не буду адаптировать свой сайт под iPhone X, пусть мучаются 🤗

  30. 1

    Сам занимаюсь вёрсткой, всегда оставляю отступы слева и справа от текста. Без отступов работают только горе-верстальщики))

  31. 2

     уже не торт(

  32. 2

    Как-то после этого уже не кажется, что прям нужен X

  33. 0

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

  34. 1

    В том году Самса, из-за батареи лишилась своей выручки в этом году Эппл,лишится из-за своего «прорыва».

  35. 1

    Народ, вот у меня есть вопрос, на этом Х-телефоне (Х написал на русском) какой будет получаться скриншот экрана, тоже рогатый??🤔

  36. -3
    Direct_control

    Вся эта истерия в комментах напоминает сначала выход 4-ки с ретина-разрешением, затем выход 5-ки с удлиненным дисплеем, и затем снова 6-ки с увеличенным. Каждый раз всё одно и то же нытье, потом выясняется, что через месяц-другой уже почти везде проведена оптимизация под новые дисплеи. Клоуны, да сейяас среди разрабов гонка начнется, кто быстрей и эффективней своё приложение или сайт адаптриует под главный смарт года

  37. 1
    Daniel_Ribeiro

    Пользуюсь стареньким 6plus 64GB , друг обновился на iOS 11, сравнивал быстродействие телефонов iPhone 6 Plus iOS 10 vs iPhone plus iOS 11. Мой вердикт да есть хорошие и очень классные функции, но я не готов 1) покупать себе новый iPhone так как меня этот устраивает. 2) обновляться и смотреть как он глючит и трепать себе нервы. Если был бы iPhone 7 то обновился и пользовался. У подруги 6+ plus работает он я бы не сказал быстрее 6 plus на iOS 11. Сырая… очень сырая iOS вышла.

  38. 0

    Фиг с этим айфоном, вы зачем это **** рекламу со звуком по середине вставили?(((( Ад какой-то, пол-семьи разбудили(((( еще раз на такое нарвусь – это будет, конечно, последний заход на ваш сайт((

  39. 0

    Да норм все с сайтами!

Авторизуйтесь Чтобы оставить комментарий