Sito Web non reattivo su Samsung Galaxy S2

Un sito Web Wordpress (utilizzando il framework Genesis) Ho progettato di essere correttamente visualizzato in modo reattivo su un iPhone e un HTC ma non sui telefoni Samsung Galaxy. (testato su Samsung Galaxy S2 e Samsung Ace) Attualmente sto usando il plugin FitVids per rendere il video più reattivo.Sito Web non reattivo su Samsung Galaxy S2

Stranamente, le pagine senza video incorporate visualizzate su un telefono Samsung vengono visualizzate correttamente, ma su una pagina con video incorporati, il layout di pagina visualizzato è quello per uno schermo del tablet e non per uno schermo del telefono.

Ho provato vari altri plugin ma nessuno di loro sembra risolvere questo problema.

Sarebbe bello se qualcuno potesse offrire qualche consiglio su questo.

Ecco il mio site

Ecco il css stylesheet

fonte

2013-07-08 user2553109

Si sta usando 'jquery.fitvids.js' versione' 1.0' dal 2011 - forse dovresti controllare gli aggiornamenti. – birgire

per favore trova il mio post, e provalo inserendo i media css –

Mi piacerebbe vedere una buona risposta a questo; nessuna delle risposte fornite indica perché una pagina con video incorpora funzioni diverse da una senza. –

provare a utilizzare questa

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

fonte

2013-12-23 13:01:22

come ho scoperto che lo schermo di Samsung è di 480 * 800px

Si prega di provare con sotto i CSS:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) { 

} 

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) { 

}

Grazie

fonte

2013-12-24 12:16:34

Non è consigliabile utilizzare le regole @media, poiché le dimensioni dei pixel su un dispositivo mobile rispetto a un desktop possono variare.

Per esempio, invece di:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) { 

} 

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) { 

}

Aggiungere un contenitore che avrà un margin-left del 5% e il margine destro del 5%:

<body> 
<div class="container"> 
# Your body goes here 
</div> 
</body>

Ho trovato questo un approccio molto più user friendly e mantenuto al design responsive rispetto alla regola standard @media.

fonte

2013-12-30 01:22:58 afang

Sito Web non reattivo su Samsung Galaxy S2

risposta

Problemi correlati