Visualizzazione "tagliata" su smartphone

**sitodue** · 22-01-2014, 12:28

Ciao a tutti!
A scopo didattico sto realizzando un semplice sito che contenga delle gallerie di oggetti (in questo caso mobili); la struttura è molto semplice e divisa in fasce:
- 1a fascia: header;
- 2a fascia: menù;
- 3a fascia: corpo;
- 4a fascia: footer;

Tutte senza la proprietà width, in modo da occupare tutta la larghezza della pagina... o almeno così credevo... perché la visualizzazione è corretta solo da pc, mentre da smarthphone per qualche motivo il sito risulta tagliato sulla destra di circa 50-100px e questo spazio è semplicemente lasciato bianco...
In pratica c'è una fascia bianca che va dall'alto al basso per tutta l'altezza del sito...
Siccome sia la struttura che le regole css sono molto semplici, e non essendo per nulla pratico di visualizzazione su smartphone non ho idea di dove andare a sistemare... mi sapreste dare qualche dritta?

il sito è online a questo indirizzo: www.medprova.altervista.org/home.html

Il codice e la struttura della pagina sono questi:

codice:

<style type="text/css">

/*reset*/
html {color: #000;     
   background: #FFF; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, 
textarea, p, blockquote, th, td {margin: 0;     
         padding: 0; }   
table {border-collapse: collapse;     
    border-spacing: 0; }   
fieldset, img {border: 0; }     
del, ins {text-decoration: none; }   
li {list-style: none; }   
caption, th {text-align: left; }   
q:before, q:after {content: ''; }    
sup {vertical-align: baseline; }   
sub {vertical-align: baseline; }   /*because legend doesn't inherit in IE */
legend {color: #000; }

/*fine reset*/

.container { 
background-image:url(img/sfondo2.jpg);
}
 
 
.header {
 height:135px;
 background-image:url(img/sfondo2.jpg);
}

#menu {
 border-bottom: solid 2px #000;
 border-top: solid 2px #000;
 background-image:url(img/sfondomenu3.jpg);
 height:35px;
 margin-bottom:20px;
}

.footer {
 border: solid 1px #000;
 height:129px;
 margin:auto;
 background-color:#000;
 color:#FFF;
 margin-top:10px;
}

</style>
</head>

<body>
    <div class="container">
        <div class="header"></div>
        <div id="menu"></div>
        <div class="footer"></div>
    </div>
</body>
</body>

All'interno dei div header, menu e footer ci sono i vari contenuti, ma anche togliendoli e lasciando vuoti i contenitori, il risultato nn cambia... anche proprio l'immagine di sfondo che dovrebbe andare ad occupare tutto lo spazio visibile, risulta tagliata sulla destra e sostituita con una fascia bianca...
Grazie a tutti per qualunque suggerimento!

**Prill** · 22-01-2014, 13:15

succede anche su pc se riduci la finestra al di sotto di 1050 pixel (quella è la larghezza occupata dai tuoi contenuti), e in questo caso risolvi aggiungendo al div container un min-width:1050px, per mobile dovrai fare lo stesso ricalcolando la larghezza minima e aggiungendola nelle istruzioni apposite

**sitodue** · 22-01-2014, 14:08

Ciao Prill! Grazie per la risposta!
In effetti non mi ero accorto che riducendo la visualizzazione il problema si manifestava anche sul pc ( :-S );
Inserendo il min-width come mi hai suggerito il problema è sparito da pc... mi sai dire come mai si verificava?
La classe .container non ha la proprietà width settata, quindi mi aspettavo che andasse a coprire in ogni caso tutto il visibile, a prescindere dall'eventuale visualizzazione scelta dal navigatore... non è così invece?
Di conseguenza è buona norma impostare sempre la proprietà min-width del contenitore uguale alla proprietà width degli elementi contenuti per evitare problemi simili col ridimensionamento?
Altra cosa, per quanto riguarda gli smartphone, il problema si è ridotto ma permane una piccola fascia bianca... In base a cosa devo calcolare li larghezza minima? Dovrò poi aggiungerla con qualche istruzione condizionale nel codice?

**Prill** · 22-01-2014, 17:48

bisognerebbe ricontrollare un po' il tutto per vedere dove è il problema (lo sfondo viene applicato sulla parte visibile del container ma non su quella al di fuori della schermata e visualizzabile tramite scrolling), il min-width è una possibile soluzione (per dispositivi mobili si può applicare una larghezza minima diversa sfruttando le media queries).

edit: ti avevo dato una larghezza minima di 1050 pixel calcolata in base a uno screenshot, ma in effetti vedo ora che quella è la larghezza che tu imposti su alcuni tuoi elementi (controlla se ci sono poi bordi o margini o padding che si sommano alla larghezza stessa). Altra soluzione per risolvere senza far calcoli è applicare lo sfondo a un livello superiore rimuovendolo dal container:

codice HTML:

html, body{
background-image:url(sfdhead2.jpg);}

**sitodue** · 24-01-2014, 11:47

Perfettissimo, grazie 1000

Discussione: Visualizzazione "tagliata" su smartphone

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione "tagliata" su smartphone

Permessi di invio