Ridimensiona la larghezza del sito per adattarsi alla larghezza dello schermo dell'iPad

Ho un sito largo 2048 px. C'è un modo per far sì che l'iPad si adatti automaticamente alla larghezza del sito sullo schermo quando il sito viene caricato? Ho provato a sperimentare con meta viewport in vari modi:Ridimensiona la larghezza del sito per adattarsi alla larghezza dello schermo dell'iPad

<meta name="viewport" content="width=device-width maximum-scale=1.0"> 
<meta name="viewport" content="width=device-width initial-scale=1.0">

Questo non ha funzionato. Il sito è ancora troppo ampio e fuoriuscita sullo schermo dell'iPad.

fonte

2013-02-15 Tim Jahn

Assicurarsi di utilizzare le virgole per separare ad es 'width = device-width' e' maximum-scale = 1.0'. – bdesham

Grazie. Ancora nessun dado però. –

Questi attributi della vista significano che Safari consente il funzionamento della progettazione reattiva, piuttosto che ingrandire la pagina per consentire che l'intera larghezza sia visibile sullo schermo dell'iPad. Quello che non faranno è sovrascrivere gli stili CSS applicati alla pagina - se il wrapper o il body hanno una larghezza fissa non lo cambieranno. Prova ad usare Adobe Edge Inspect http://html.adobe.com/edge/inspect/ per vedere quali stili vengono applicati sull'iPad. Se possibile, includi gli stili CSS wrapper nella tua domanda. – pwdst

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

Questo è quello che uso per il mio sito web.

fonte

2013-02-15 20:16:59 VladHQ

:(Non funziona per me, lo stesso problema si verifica ancora –

Puoi fornire un esempio dal vivo? ** Modifica: ** Questo sito funziona sul tuo iPad: https://v1k.org/? – VladHQ

Questo sito funziona Qual è la larghezza del tuo sito per quel sito? –

Provare a impostare min-width: 2048px; nei tag html e body in css. Questo ha risolto alcune stranezze su iPad per me prima, ma non sono sicuro se si applicherà a questo.

fonte

2013-02-15 20:24:33 Sean

Nessun dado purtroppo. –

A meno che questo sito Web sia progettato esclusivamente per l'uso su dispositivi con schermo di grandi dimensioni, questo approccio causerà problemi di usabilità sostanziali (e un sacco di scorrimento) su dispositivi con schermi più piccoli, specialmente mobili. Considera Responsive Web Design (http://alistapart.com/article/responsive-web-design) per consentire al contenuto del tuo sito di adattarsi a diverse dimensioni del viewport o utilizzare una larghezza rappresentativa della maggior parte dei visitatori del tuo sito (usa qualcosa come Google Analytics per determinare questo) se si deve usare una larghezza fissa. Forzare una larghezza molto alta o bassa per tutti gli utenti fornirà un'esperienza utente negativa per molti. – pwdst

La larghezza del sito è 2048 ... Penso che l'usabilità sia già un problema. Non penso che l'impostazione della larghezza aumenterà le cose. Responsive è sempre una risposta migliore, ma non è quello che ha chiesto. – Sean

Stavo lavorando su un sito con lo stesso problema di recente, non sarebbe rimasto zumato tra i clic di una pagina per un sito fisso di larghezza di 960px. Prova:

<meta name="viewport" content="width=device-width, initial-scale=-100%" />

Fin qui tutto bene, passato sul mio Ipad Air.

fonte

2013-12-17 14:06:12 britter

è possibile passare una dimensione fissa alla larghezza contenuti in questo modo:

<meta name="viewport" content="width=2048" />

potrebbe essere necessario qualche ritocco per consentire imbottiture entrambi i lati, ma dovrebbe caricare il sito in quel formato e consentire agli utenti di ingrandire.

fonte

2014-01-06 10:19:38 jjgrainger

Il modo corretto per risolvere questo problema è utilizzando percentuali anziché larghezze fisse. Ma se "non si può" cambiare la situazione, è possibile forzare la vostra finestra per ridimensionare utilizzando 0.x in iniziale scala come:

<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />

fonte

2016-05-11 16:52:16 steffanjj

Questo funziona bene:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes">

fonte

2018-03-02 08:07:51 Cubiczx

Ridimensiona la larghezza del sito per adattarsi alla larghezza dello schermo dell'iPad

risposta

Problemi correlati