Come regolare automaticamente la dimensione div per tutti i formati di visualizzazione mobile / tablet?

Ho progettato una pagina in cui sono presenti quattro tag div nella pagina. Se provo la pagina nel telefono cellulare (5 pollici) si adatta perfettamente alla pagina, Se provo la stessa pagina in tablet la pagina si adatta con il 30% dello schermo. Quindi, come posso impostare la dimensione div modo che si adatti a tutti i tipi di schermi.

Collegamento Fiddle

HTML:

  

Three Levels







Qualsiasi suggerimento, per favore

Questo è chiamato Responsive Web Development (RWD) . Per rendere la pagina retriggers a tutti i dispositivi è necessario utilizzare alcune fondamentali di base come: –

1. Imposta il meta tag viewport in testa:

  

2. Utilizzare le query multimediali .

Esempio:-

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

3. Oppure possiamo usare direttamente il framework RWD : –

  • bootstrap
  • Fondazione 3 ecc.

Alcuni di buon articolo

Media query per dispositivi standard – BY CHRIS COYIER

Dimensioni dei supporti CSS

4. Query multimediali per dispositivi di dimensioni maggiori, dispositivi medi e piccoli dispositivi. ( Lavorare nei miei scenari ) .

Sotto le query multimediali per tipo di dispositivo generico: – Dispositivo più grande, Dispositivi medi e Piccoli dispositivi. Questo è solo tipi di media di base che funzionano per tutti gli scenari e il codice facile da gestire, invece di utilizzare varie query multimediali, basta prendersi cura di tre tipi di media.

 /*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/ @media screen and (min-width: 1024px){ /*Style*/ } /*###Tablet(medium)###*/ @media screen and (min-width : 768px) and (max-width : 1023px){ /*Style*/ } /*### Smartphones (portrait and landscape)(small)### */ @media screen and (min-width : 0px) and (max-width : 767px){ /*Style*/ } 

La tua domanda è un po ‘oscura su ciò che vuoi, ma a giudicare dai tuoi commenti, presumo tu voglia che ogni bolla copra lo schermo, sia verticalmente che orizzontalmente. In tal caso, la parte verticale è la parte difficile.

Come molti altri hanno risposto, per prima cosa è necessario assicurarsi che si stia impostando il meta tag viewport per far sì che i dispositivi mobili utilizzino la loro viewport “ideale” invece della finestra “desktop width” emulata. La versione più semplice e più stupida di questo tag è la seguente:

  

Fonte: PPK, probabilmente il principale esperto su come funziona questa roba. (Vedi http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf ).

In sostanza, quanto sopra assicura che le query multimediali e le misurazioni CSS corrispondano alla visualizzazione ideale di un “punto” virtuale su un dato dispositivo – invece di ridurre le pagine per lavorare con layout desktop non ottimizzati. Non è necessario capirne i dettagli, ma è importante.

Ora che abbiamo una finestra mobile corretta (non falsificata) con cui lavorare, la regolazione all’altezza della finestra è ancora un argomento delicato. In generale, le pagine Web vanno bene per espandersi verticalmente, ma non orizzontalmente. Quindi, quando si imposta l’ height: 100% su qualcosa, quella misura deve riguardare qualcos’altro. Al livello più alto, questa è la dimensione dell’elemento HTML. Ma quando l’elemento HTML è più alto dello schermo (e si espande per contenere il contenuto), le tue misurazioni in percentuale saranno rovinate.

Inserisci l’unità vh : funziona come le percentuali, ma funziona in relazione al viewport, non al blocco contenitore. Pagina di informazioni MDN qui: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

L’utilizzo di quell’unità funziona esattamente come ti aspetteresti:

.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */

Funziona su molti browser (IE9 e versioni successive, Firefox moderno, Safari, Chrome, Opera, ecc.) Ma non tutti (informazioni di supporto qui: http://caniuse.com/#search=vh ). Il rovescio della medaglia nei browser in cui funziona è che c’è un grosso bug in iOS6-7 che rende questa tecnica inutilizzabile proprio in questo caso (dettagli qui: https://github.com/scottjehl/Device-Bugs/issues/36 ). Tuttavia, verrà risolto in iOS8.

A seconda della struttura HTML del tuo progetto, puoi usare l’ height: 100% su ogni elemento che dovrebbe essere alto quanto lo schermo, purché siano soddisfatte le seguenti condizioni:

  1. L’elemento è un elemento figlio diretto di .
  2. Sia l’ html che gli elementi del body hanno un set di altezza del 100%.

Ho usato questa tecnica in passato, ma era molto tempo fa e non sono sicuro che funzioni sulla maggior parte dei dispositivi mobili. Provalo e guarda

La prossima scelta è quella di utilizzare un helper JavaScript per ridimensionare i tuoi elementi per adattarli alla vista. O un polyfill che vh problemi di vh o qualcos’altro. Purtroppo, non tutti i layout sono fattibili in CSS.

Puoi usare l’altezza del viewport, basta impostare l’altezza del div in height:100vh; , questo imposterà l’altezza del div all’altezza del viewport del dispositivo, inoltre, se si desidera che sia esattamente come lo schermo del dispositivo, impostare il margine e il padding su 0.

Inoltre, sarà una buona idea impostare il meta tag viewport:

Si noti che questo è relativamente nuovo e non è supportato in IE8-, dare un’occhiata alla lista di supporto prima di considerare questo approccio ( http://caniuse.com/#search=viewport ).

Spero che questo ti aiuti.

Non ho molto tempo e il tuo jsfidle non ha funzionato in questo momento.
Ma forse questo ti aiuterà a iniziare.

Prima di tutto dovresti evitare di inserire css nei tuoi tag html. Come align="center" .
Metti cose del genere nel tuo css dato che è molto più chiaro e non lo deprecherò così velocemente.

Se vuoi progettare layout reattivi dovresti usare le media query che sono state introdotte in css3 e che ora sono supportate molto bene.

Esempio css:

 @media screen and (min-width: 100px) and (max-width: 199px) { .button { width: 25px; } } @media screen and (min-width: 200px) and (max-width: 299px) { .button { width: 50px; } } 

È ansible utilizzare qualsiasi css desiderato all’interno di una query multimediale.
http://www.w3.org/TR/css3-mediaqueries/

Uso qualcosa del genere nel mio documento. Già

 var height = $(window).height();//gets height from device var width = $(window).width(); //gets width from device $("#container").width(width+"px"); $("#container").height(height+"px"); 

Violino

Vuoi impostare l’altezza che può essere impostata per tutti i dispositivi?

Decidi il design del sito ovvero Altezza su vari dispositivi.

Ex:

  • Height-100px per bolle sul dispositivo con -min-width: 700px .
  • Height-50px per bolle sul dispositivo con < 700px ;

Avere il tuo css che ha altezza 50px;

e aggiungi questa query multimediale

  @media only screen and (min-width: 700px) { /* Styles */ .bubble { height: 100px; margin: 20px; } .bubble:after { bottom: -50px; border-width: 50px 50px 0; } .bubble:before { top: 100px; border-width: 52px 52px 0; } .bubble1 { height: 100px; margin: 20px; } .bubble1:after { bottom: -50px; border-width: 50px 50px 0; } .bubble1:before { top: 100px; border-width: 52px 52px 0; } .bubble2 { height: 100px; margin: 20px; } .bubble2:after { bottom: -50px; border-width: 50px 50px 0; } .bubble2:before { top: 100px; border-width: 52px 52px 0; } } 

Ciò farà sì che le tue bolle abbiano un'altezza di 100 px su dispositivi superiori a 700 px e un margine di 20 px;

Mentre cercavo la mia risposta per la stessa domanda, ho trovato questo:

  

Puoi usarlo all’interno di un tag (iframe o img) che l’immagine regolerà in base al suo dispositivo.

Prova a dare ai tuoi div una larghezza del 100% .

Semplice:

>

Saluti!