У меня проблема с установкой высоты webapp (рабочий экран). Im использует следующий метатег:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
Моя проблема в том, что на экране есть черные полосы сверху и снизу. Сначала я хочу сказать, что это ошибка iphone 5 из-за более сложного экрана. Но сегодня я увидел webapp (apps.ft.com/), который идеально подходит для экрана iphone5.
Любые идеи, что они делают неправильно?
здесь мои полные соответствующие метатеги
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png">
EDIT: После часа поиска я нашел решение, как заставить браузер поместиться на полную высоту. Мой iphone подходит только по высоте, когда я определяю загрузочный образ (apple-touch-startup-image). Здесь мой код:
<!-- iPhone 4 (Retina) -->
<link href="img/icons/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="img/icons/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
