matiouchkine Nov 5 2011 at 10:47

Эмуляция интерфейса iPhone с помощью CSS

1 min

2.9K

Website development*

+53

Comments 48

ertaquo Nov 5 2011 at 11:08

А чем оно лучше/хуже jQuery Mobile, iUI и прочих? Например, оно iPhone UI Kit позволяет делать анимацию перехода?

matiouchkine Nov 5 2011 at 11:11

Оно не лучше и не хуже. Оно — просто один файлик css, который может быть просто подключен к существующему проекту. Там нет js, поэтому анимацию — вряд ли.

+12

mcslayer Nov 5 2011 at 12:21

Если анимацию и остальные «красивости» добавить с помощью css3, то будет еще лучше.

XAMelleOH Nov 5 2011 at 15:58

Точно не вряд ли… есть какой-то проект, имитирующий интерфейс iPhone с помощью CSS3.

matiouchkine Nov 5 2011 at 16:19

CSS — даже если это CSS100500 — это стилевой пакет атрибутов страницы. С помощью CSS анимацию навигации по страницам сделать не удастся. Поправьте меня, если я ошибаюсь.

beatlejute Nov 5 2011 at 20:04

Загуглите css анимация

Zelgadis Nov 5 2011 at 21:58

Человек говорит о переходе со страницы не страницу. Без javascript'a это не сделать.

Комментарий не читай
@
Сразу острить начинай

spiff Nov 5 2011 at 11:08

Длбавьте к тегу img параметр align = «left» | «right»

matiouchkine Nov 5 2011 at 11:12

Спасибо.

RockmanLeto Nov 5 2011 at 11:49

Хорошая статья.
Кстати на изображении в топике интерфейс немного напоминает интерфейс китайской копии )

matiouchkine Nov 5 2011 at 11:53

Они наверняка тоже пережатый жипегом дизайн получили от заказчика ;-)

Error_403_Forbidden Nov 5 2011 at 12:08

А вот там не работает выделение текста. Это баг или фича?
Хотелось бы всё-таки иметь возможность выделять текст.

Andrusha Nov 5 2011 at 12:40

В Опере работает, но шрифт с засечками почему-то

matiouchkine Nov 5 2011 at 13:23

Упс. И правда. Я посмотрю вечером. Если честно, я совсем не разбирался с кодом.

-2

diamant Nov 5 2011 at 13:55

Фича для айфона, чтобы по нажатию на кнопки-ссылки он не выделялись:
-webkit-user-select: none;

Error_403_Forbidden Nov 5 2011 at 14:08

На вкладке «About» выделение совсем не помешало бы. Да и не только там

matiouchkine Nov 5 2011 at 14:20

s/-webkit-user-select: none; //g

diamant Nov 5 2011 at 14:56

сделайте
p{
-webkit-user-select: initial;
}

tenshi Nov 5 2011 at 12:49

chatter.mudasobwa.ru/forms.html — тут в хроме косяки с выравниванием текста.

matiouchkine Nov 5 2011 at 14:23

У меня под рукой только chromium, там все хорошо. Скриншотик бы.

UFO just landed and posted this here

matiouchkine Nov 5 2011 at 15:31

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

UFO just landed and posted this here

matiouchkine Nov 5 2011 at 15:54

Строка 572: попробуйте с margin-top поиграться.
Для кнопок: в строке 71 нужно line-height, и/или размер шрифта поменьше выставить.

Это из того, что могу сказать наугад. У меня на 14 версии хромиума не воспроизводится.

stell_hawk Nov 6 2011 at 06:51

хм. учитывая что проект не обновляется с 2008 года, то о чем речь-то…
и очень умеляет надпись coming soon… которая написанна 2-3 года назад

tenshi Nov 6 2011 at 01:41

img-fotki.yandex.ru/get/5412/103756340.0/0_76061_f814924_orig

UFO just landed and posted this here

matiouchkine Nov 5 2011 at 13:25

А как надо сказать, если при помощи css создается некое подобие внешнего вида iPhone? Скорее уж слово интерфейс тут гиперонимично.

Zhendalf Nov 5 2011 at 13:13

Как это выглядит на андроиде?

matiouchkine Nov 5 2011 at 13:25

Не знаю :-)

Gafs Nov 5 2011 at 13:32

Как седло на корове.

a1exDi Nov 5 2011 at 13:54

Не знаю, каких результатов вы ожидали, учитывая, что это обычный CSS :) Но если интересно, то:

Zhendalf Nov 5 2011 at 13:56

Вебкит вебкиту рознь. А опера — совсем другая история.

matiouchkine Nov 5 2011 at 14:18

Спасибо.

NonRealDeveloper Nov 5 2011 at 14:05

JQuery mobile — наше всё

CKOPOBAPKuH Nov 5 2011 at 15:50

да, но оно же тормозит. то есть, тестовые примеры выложенные на их сайте тормозят и на компьютере, и на всех телефонах, которые попадали мне в руки. айфон, правда, мне не попадал, но на galaxy s тормозят. и на samsung wave тормозят.
это я что-то не так делал и у вас всё нормально, или вы с этим смирились как-то?

Elegar Nov 5 2011 at 14:26

Сейчас Apple набежит с вами судиться за использование их дизайна:)

matiouchkine Nov 5 2011 at 14:39

Мопед не мой, во-первых. Во-вторых — буду только рад их затроллить до изнеможения.

andoriyu Nov 5 2011 at 22:03

> Во-вторых — буду только рад их затроллить до изнеможения.
Так и вижу тебя со слюнями выставляющего самого себя идиотом на публики кричащим БАТТХЕРТ Я ВАС ЗАТРОЛЛЕЛ!!!!!111111111одинодин

Жаль, что я этого не увижу.

-1

matiouchkine Nov 6 2011 at 08:34

Мальчик, отойди от зеркала.

Zelgadis Nov 6 2011 at 09:35

Всех затроллел. Молодец.

IGHOR Nov 5 2011 at 17:26

До сих пор не понимаю зачем в iOS кнопка назад в самом вверху экрана…
Разве это удобно тянуться через весь экран пальцем, держа его в одной руке, к верхнему углу и нажимать кнопку «Назад»?
Намного удобнее разместить ее внизу экрана, а еще лучше хардварную кнопку назад как в WP7 устройствах сделали…