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.402
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
MarcoGrazia Rifacimento sito de Genealogia italiana Presenta il tuo Sito 2
Z Hacker sito ARUBA Sicurezza e Virus 0
Shyson Non mi fa accedere al sito WordPress 12
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 6
R Dubbi trasferimento sito WordPress 1
D Creazione sito e-commerce WP CMS (Content Management System) 0
R Dubbi copia sito CMS (Content Management System) 2
A Consiglio per creazione sito web CMS (Content Management System) 0
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 1
M eliminare padding logo sito HTML e CSS 2
M Come individuare il link sito entrante Google Analytics 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
D Progetto sito Discussioni Varie 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
R inserire video nel sito HTML e CSS 15
C Come caricare foto da google foto ad un sito? Discussioni Varie 1
G cerco: traffico sito, pubblicità condividente post su pagine gruppi Vendere e Acquistare pubblicita' online 0
R Navigare sito con cURL, mi restituisce errore PHP 0
U traffico verso sito Vendere e Acquistare pubblicita' online 3
M Come gestire aggiornamenti e modifiche di sito live CMS (Content Management System) 0

Discussioni simili