Adattare sito a diverse risoluzioni

[Punkeco]

Buonasera,
Vi espongo il mio problema: ho testato il mio sito web con screenfly per vedere se si adattava a tutte le risoluzione possibili e ho notato che con i 16:9 non è un problema ma con i 4:6 si.
Premetto che non voglio usare il responsive design, mi basterebbe qualcosa che rileva la risoluzione del dispositivo e tramite un foglio di stile cambia i contenuti.
Grazie in anticipo e attendo vostre risposte.

 

[helpdesk]

Ciao, per adattare il layout a tutte le risoluzioni basta creare un div principale
e centrarlo per poi inserire degli elementi espandibili al 100% con il css
fuori da tale div esempio il footer in modo che si adatti allo schermo.

 

[Punkeco]

Si infatti ho fatto cosi infatti per le risoluzioni da 16:9 tipo 1920 x 1080 non da probelmi, invece per quelle in verticale come quella degli smartphone mi schiaccia tutto..
Se vuoi ti do il mio sito

 

[helpdesk]

Ciao, se ti schiaccia è per via del fatto che non hai impostato dei parametri fissi relativi al div contenitore principale.
Bada bene: gli elementi che devono adattarsi non devono essere quelli esterni al div principale non il div principale stesso.

 

[Punkeco]

ma è comunque possibile inserire uno script o un foglio di stile che se sei su un dispositivo mobile (smartphone o tablet) ti fa scegliere fra 2 pagine distinte?

 

[Max 1]

Dato e certo che fare dei layout elastici o liquidi non è così semplice come dirlo e anche i programmatori più esperti si trovano nei guai quando tutto deve funzionare per tutte le risoluzioni e per tutti i browser, poi ora aggiungiamo anche i device mobili, in generale si consiglia di usare uno script che riconosca il browser e il device e indirizzi verso una versione del sito sviluppata per quella situazione possibilmente con layout fisso; va da se che qualcuno non è d'accordo con questa teoria e preferisce fare layout elastici, ma è certo che avrà sempre problemi e non sempre una bella visione

 

[helpdesk]

Ciao max1, concordo sul fatto che non sia facile, vanno assolutamente riconosciuti i browser. Ma io faccio layout liquidi da una vita e ti assicuro che ė possibile basta applicar si un minimo.

 

[Salvo Salvi]

Helpdesk scusa ma non ho capito quello che intendi. Tu dici di fare un div esterno e dargli una grandezza fissa in px o in %? e dopodiche dici di applicarli dentro a questo div altri div sempre con width in % o in px giusto?

Cmq per il responsive design esistono le media queries

 

[helpdesk]

Ciao, no, intendo dire un div fisso e quelli esterni liquidi.

 <div class= topbar>
    A questo div "esterno" con  CSS assegni width:100%; 
 </div>

// Al div contenitore_globale assegni una posizione relativa 
// con altezza e larghezza fisse.  
// Esempio 980px X 1200px.

 <div class="contenitore_globale">

// A questi div assegni una posizione assoluta.
  
  <div class= "header"></div>
  <div class="titolo"></div>
  <div id="gallery">

 </div>

// Fuori dal div fisso "contenitore_globale". 

 <footer>
    A questo div con CSS assegni width:100%;
 </footer>

 

[Salvo Salvi]

A si, anchio a volte faccio cosi, e per ora non ho riscontrato molti problemi.

 

[Punkeco]

http://alessandrodonofrio.it
come potete vedere ho settato tutto con le %, quello che intendevo è quello che dice max

 

[Fez Vrasta]

Esiste da diverso tempo l'idea di responsive design.

In pratica si crea un documento CSS principale e lo si va ad implementare con un CSS aggiuntivo a seconda della risoluzione, un esempio è l'ottimo framework Bootstrap.
http://twitter.github.io/bootstrap/


Detto con un esempio:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

farà in modo che se il dispositivo ha una risoluzione compresa tra 701 e 900 px venga caricato lo stylesheet medium.css
Dentro di esso potrai impostare dimensioni e modificare la struttura del sito per data risoluzione.

Se non sei pratico di HTML5 e CSS3 ti converrebbe utilizzare bootstrap come base per il tuo sito.

 

[Punkeco]

risolto, ho usato un metodo simile al tuo, ho utilizzato uno script che rileva i dispositivi mobili e reindirizza ad un altro link (mobile.x.it)

 

[Fez Vrasta]

le versioni mobile dei siti sono un costo di sviluppo superfluo ma sono soprattutto inutili.

Dubito fortemente che il tuo sito mobile sarà compatibile sul mio vecchio Nokia N95, sul mio tablet 10" e sul mio HTC One X.
Dovresti quindi darmi a disposizione tre siti differenti per i miei tre dispositivi, e altrettanti per ogni altro dispositivo esistente.

Un sito responsivo invece ha un costo di mantenimento identico a quello di un sito normale ma può offrire contenuti a qualunque tipo di dispositivo.

 

[Jonn]

CSS:

.left		{float: left;}
.right		{float:right;}
.grey		{background: #DDDDDD;}
.both		{clear: both;}

.header		{width: 100%; height: 200px; margin: 00px 00px 10px 00px;}
.sezione	{width: 100%;}
.navleft	{width: 150px;               margin: 00px 10px 10px 00px;}
.contcontent	{width: 100%;                margin: 00px -320px 10px 00px;}
.content	{                            margin: 00px 320px 10px 00px;}
.navright	{width: 150px;               margin: 00px 00px 10px 10px;}

HTML:

<link rel="stylesheet" type="text/css" href="style.css" />
	<div class="header left grey">Header</div>
		<div class="sezione left">

			<div class="navleft left grey">Navleft</div>

			<div class="contcontent left">
				<div class="content grey">Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</div>
			</div>

			<div class="navright left grey">Navright</div>

		</div>
	<div class="footer both grey">Footer</div>

Salva il CSS nella stessa cartella del file HTML e dagli nome style.css
In questo modo nel css devi dare dove c'è scritto 320 (nei margin) la somma delle larghezze dei due div laterali (se vuoi cambiarle) comprese di padding e margin.