Adattare sito a diverse risoluzioni

Punkeco

Nuovo Utente
1 Mar 2013
10
0
0
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

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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

Nuovo Utente
1 Mar 2013
10
0
0
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

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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

Nuovo Utente
1 Mar 2013
10
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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

Utente Attivo
14 Nov 2012
230
0
0
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

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, no, intendo dire un div fisso e quelli esterni liquidi.
PHP:
 <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>
 
Ultima modifica:

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
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:

Codice:
<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

Nuovo Utente
1 Mar 2013
10
0
0
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

Utente Attivo
11 Mag 2013
409
0
0
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

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
CSS:
Codice:
.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:
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Adattare sito alle varie risoluzioni... HTML e CSS 2
P Risoluzione del sito si può adattare? HTML e CSS 0
V Adattare sito web per tutte le risoluzioni ? HTML e CSS 1
L Adattare il sito a qualsiasi computer Webdesign e Grafica 4
G adattare sito con frame a monitor [era:Frame] Webdesign e Grafica 3
StefanoITA Adattare il sito alla risoluzione del visitatore HTML e CSS 5
M Adattare sito a risoluzione video [era:help me] HTML e CSS 6
C Adattare il sito a vari schrmi HTML e CSS 2
M [Javascript] Adattare immagine di background all'altezza dello smartphone Javascript 1
L [HTML] Adattare bordo al contenuto HTML e CSS 4
D [Javascript] Convertire ed adattare una data Javascript 1
Juriy APP: Adattare immagini a GIF animata in real time Programmazione 0
B Adattare testo a cornice HTML e CSS 2
felino [CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore HTML e CSS 2
felino Adattare un layout desktop ad un responsive HTML e CSS 9
K Adattare app ad ogni schermo Sviluppo app per Android 1
L Adattare sfondo in base alla risoluzione WordPress 3
R Adattare immagini alla dimensione del monitor Javascript 2
M Adattare script di "form mail con upload file" al mio form mail HTML! PHP 7
S Adattare la pagina web creata ad ogni monitor HTML e CSS 11
C Adattare uno script di altro linguaggio a javascript Javascript 11
W Adattare immagini slideshow a riquadro predefinito Webdesign e Grafica 0
matrobriva Adattare classe Odt2Xhtml PHP 2
F [HELP] Adattare al form Visual Basic 0
P Adattare un layer alle varie risoluzioni HTML e CSS 0
D Adattare contenuto a risoluzione utente HTML e CSS 5
M Adattare iFrame HTML e CSS 5
B Adattare tabella a immagine di sfondo con Dreamweaver Cs3 Webdesign e Grafica 3
G adattare pagina web a tutte le risoluzioni HTML e CSS 9
C Adattare un filmato a vari monitor Flash 5
glm2006ITALY Guida Il proprio sito WordPress è professionale? WordPress 0
shelbystudio cliente moroso: posso disattivare email e sito in attesa del pagamento? Leggi, Normative e Fisco 3
R Messaggio apertura sito WordPress 4
E Benvenuti sul Nuovo Sito: Explore Como Lake! Presenta il tuo Sito 0
R Aiuto ripristino sito web Presentati al Forum 0
A Vendo sito web news economia, finanza, immobiliare online da pochi mesi Compravendita siti e domini 0
D [COMPRO/CERCO] GUEST POST o scambio link per sito di Spiritualità ed Esoterismo. Vendere e Acquistare pubblicita' online 0
M Vendo il mio sito web teknosurfng.com, che trasmette nel campo della tecnologia Compravendita siti e domini 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
D protezione cartelle: blocco visualizzazione/scaricamento contenuto, ma abilitazione utilizzo dati da parte di file .php presenti sul sito Web Server 1
M Analisi sito per pulire codice inutile HTML e CSS 1
C iscrizioni malevole su sito off-line WordPress 6
M [cerco webmaster] sito web da modificare Offerte e Richieste di Lavoro e/o Collaborazione 0
F Animazione testo sito web diminuire grandezza di un testo allo scroll Javascript 0
N Vendo sito web di casino online con 1000 giochi Compravendita siti e domini 0
R Recupero di permalink di un sito che è stato eliminato per errore WordPress 5
A Web master per semplice sito web Offerte e Richieste di Lavoro e/o Collaborazione 2
G VENDO sito completo Compravendita siti e domini 0
N Creazione sito web senza Partita IVA (Era: mettersi in regola) Leggi, Normative e Fisco 1
V dati scomparsi dal sito HTML e CSS 3

Discussioni simili