Pagina per cellulare

**Shikamaru93** · 10-09-2013, 23:15

Sto facendo una piccola pagina da vedere sul cellulare in html senza i tag di paginazione che si usano normalmente.
Il problema che quando vado a vederla sul cellulare, me la carica come se stesse caricando un intero sito, con l'obbligo di zoommarci sopra per riuscire a leggere il testo.
Siccome si tratta di una pagina che si potrà vedere solo da cellulare, vorrei sapere se è possibile, "caricarla tutto schermo".
Il codice della mia pagina è questo

codice:

<html>
<head><title>Uscite Romanzi</title>
<style type="text/css">
	#contenitore{
		background-color:#caccca;
	}
</style>
</head>
<body>

<div id="contenitore">
	<div id="content">
		<table width="343" height="49" border="1">
			<tr>
			  <td width="235">

Volumi</p></td>
			  <td width="98">

Uscita IT</p></td>
			</tr>
			<tr>
				<td>01) Fighting Boy Meets Girl <font color="red">New!</font></td>
				<td>13-06-2013</td>
			</tr>
	  </table>
	</div>
</div>

</<body>
</html>

Come si vede dalle dimensioni della tabella, la pagina sarà larga al massimo 343px; anche impostando la restrizione sul css della larghezza, mi carica il colore di sfondo fino a 343px e dopo inizia il bianco perchè zoomma all'indietro la pagina.
Forse non sono stato molto chiaro. Ditelo pure che al limite metto due immagini per capirsi.

P.s: il colore di sfondo è stato un caso che sia venuto così. xD Cercavo una qualunque tonalità di grigio chiaro

**Nobody33** · 10-09-2013, 23:34

Usare le tabelle per fare un sito responsive non è una buona idea.

Usa le media queries e i <div>; esempio:

codice:

@media(min-width:344px){
/*stile per risoluzione 344px in poi*/
#divEsempio1{background: black;
}

}
@media(max-width:343px){
/*stile per risoluzione fino a 343px*/
#divEsempio1{ background:red;
}
}

EDIT

Nel documento html, php o quello che è ci metti:

codice:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

**Shikamaru93** · 11-09-2013, 00:14

Cioè così?

codice:

<html>
<head><title>Uscite Romanzi</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
	@media(min-width:344px){
		/*stile per risoluzione 344px in poi*/
	#divContenitore{background-color:#caccca;}
	}
	
	@media(max-width:343px){/*stile per risoluzione fino a 343px*/
	#divContenitore{ background-color:#caccca;
	}
	}
</style>
</head>
<body>

<media id="Contenitore">
		<table width="343" height="49" border="1">
			<tr>
			  <td width="235">

Volumi</p></td>
			  <td width="98">

Uscita IT</p></td>
			</tr>
			<tr>
				<td>01) Fighting Boy Meets Girl <font color="red">New!</font></td>
				<td>13-06-2013</td>
			</tr>
	  </table>
</media>

</<body>
</html>

Scusa se rompo ma non l'ho mai visto quel tag e non so come si usa...

**Nobody33** · 11-09-2013, 00:38

Esattamente.

Meglio se ti fai una pagina di prova per capire come funziona.
Una volta fatto, rimpiccolisci la finestra del browser fino a 344px ed il colore di sfondo dovrebbe cambiare.

Vedesi QUI per capire meglio; ovviamente devi rimpiccolire ed ingrandire la finestra del browser oppure ti visualizzi il sito direttamente dal tuo dispositivo.

EDIT

Ho appena notato che hai sostituito il <div id=""... con <media id=""....

Nel html lasci tutto cosi com'è, ovvero DIV rimane DIV (!) e l'id deve rimanere lo stesso. Cambia solamente il css, ovvero nelle @media queries metti lo stile che vuoi per ogni risoluzione; puoi impostarti anche una risoluzione specifica; invece di 344px usa 700px o quello ti piace; ho usato 343px e 344px perché ho notato che l'hai messo come larghezza nella tabella.

**Shikamaru93** · 11-09-2013, 08:59

Ah perfetto ho capito!

Ora fa quello che deve fare!
Grazie mille!

Ultima domanda: i soliti tag immagini, video eventualmente ecc funzionano sempre in pagine del genere, vero?

**Nobody33** · 11-09-2013, 21:42

Ultima domanda: i soliti tag immagini, video eventualmente ecc funzionano sempre in pagine del genere, vero?

Che vuoi dire con "pagine del genere"

I media queries sono css3, non html.
Perché non dovrebbe funzionare?

Discussione: Pagina per cellulare

Strumenti discussione

Ricerca discussione

Visualizza

Pagina per cellulare

Permessi di invio