2013-05-17 10 views
9

Quando utilizzo la modalità a schermo intero di Safari su un dispositivo iOS, l'intestazione del mio sito Web si trova sotto la barra di stato. Sto usando jQuery Mobile ma ho anche avuto lo stesso problema usando Twitter Boostrap. Ecco il mio codice:L'HTML a schermo intero sul dispositivo iOS va sotto la barra di stato

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script> 

</head> 
<body> 

Ho anche preso uno screenshot del problema. Come puoi vedere, la mia barra del titolo si trova sotto la barra di stato dell'iPad. Ho provato a cambiare lo stile di apple-mobile-web-app-status-bar in cose diverse, ma non influenza la barra di stato. La cosa strana è, apple-mobile-web-app-status-bar-style, non fa alcuna differenza, non importa in che modo lo cambi.

enter image description here

risposta

4

Questo è strano come il codice sia corretto. Ho due suggerimenti:

  1. provare a invertire web-app-capable e status-bar-style meta tag? Non che dovrebbe fare alcuna differenza, ma tutte le mie app web a schermo intero li hanno nell'ordine inverso (es .: status-bar-style prima).

  2. Provare a rimuovere l'app della schermata iniziale e riaggiungerla dopo aver apportato la modifica? Ho trovato tutti i metatag per gli elementi specifici delle app Web (ad esempio: barra di stato, icona, immagine di avvio ecc.) Non si aggiornano correttamente tutto il tempo a meno che non lo faccia.

+1

In realtà l'ho capito ieri ma non sono riuscito ad aggiornarlo. Ri-aggiungendo ha funzionato. Originariamente avevo lo stile di apple-mobile-web-app-status-bar impostato su default quando l'ho aggiunto. L'ho modificato in nero ma non lo ho aggiunto nuovamente. Dopo che l'ho ri-aggiunto, ha funzionato. – Keith

Problemi correlati