оптимизированное для iPhone 2-страничное «приложение» (веб-сайт)

0

Я хотел бы создать веб-сайт, который будет действовать как приложение. Это супер просто, но я до сих пор не могу понять, как заставить его работать...

Это в основном изображение, которое будет отображаться при запуске приложения с вашего рабочего стола (мне нужно как-то отключить адрес и навигационную панель). Когда вы нажимаете на изображение, оно должно показывать следующее изображение.

Я пробовал эту строку кода

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="apple-touch-icon" href="images/template/engage.png"/>

и изображения кодируются таким образом

    <a href="xxx.html">
<img src="xxxx.png"/>
</a>

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

Кроме того, всякий раз, когда нажимается ссылка на изображение, открывается новое окно сафари и содержит поле навигационных баров и адресов сафари.

Кто-нибудь знает, как я могу это сделать?

Заранее спасибо..

Теги:
iphone

2 ответа

0

Вы можете установить максимальную ширину на вашем изображении в css, чтобы изображение не было более широким, чем текущее окно:

img { max-width: 100%; }

Вы можете захотеть использовать фреймворк css, например Bootstrap или Foundation. Это может помочь вам сделать отзывчивый/мобильный веб-сайт немного легче, особенно с их сетчатыми системами и гибкими элементами ui.

Поделиться
-2

попробуйте в стиле css

img{
  max-width: 100%;
}

EDIT Извините, я торопился.)

Поделиться
  • 0
    Это кажется правильным, за исключением того, что вам нужна max-width: 100% :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню