Richiamare foglio di stile su width-device

**Neomx** · 23-04-2016, 00:52

Salve a tutti!
Avrei bisogno di un aiuto... Sto cercando di fare in modo che, un sito disegnato per il web, sullo smartphone mi carichi un foglio di stile diverso e non quello del web... Però non funziona. Il codice nell'head è il seguente:

codice HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" media="all and (max-device-width: 400px) and (orientation:portrait)" href="phone.css" type="text/css" /><link href="scarpasoun.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

Ora... Ho provato a mettere il link a phone.css subito dopo il reset ma nulla. Ho provato a mettere anche nel css per il web un min-device-width per dirgli "da quella larghezza del device applica quel foglio di stile"... Ma nulla. Non me lo prende, quindi mi chiedevo... Cosa sbaglio? E' la prima volta che provo e devo non aver afferrato qualcosa

Grazie a tutti in anticipo

**Ciakko** · 23-04-2016, 13:21

Ciao, sicuro che il device che usi per il test abbia una risoluzione CSS massima di 400px?
Richiamare vari css ha un difetto enorme ossia si rischia di far sovrapporre più fogli di stile almeno di non indicare precisamente per ogni foglio il min,max e orientation.
Ti consiglio di usare un solo foglio di stile ed inserire a fondo pagina le variazioni per le varie risoluzioni del tipo:

@media screen and (max-width:400px){
#wrapper{};
#container{};
ecc...
}

**Neomx** · 23-04-2016, 14:58

Si in generale lo ho fatto per tutto il sito e alla fine ho optato per fare così, però una cosa non posso farla: nel sito c'è una gallery che vorrei non ci fosse sul mobile, quindi la mettevo in display:none specificando in quale range di width-device deve succedere. In pratica:

@media screen and (min-device-width:300px) and (max-device-width:700px) {
#congallery {display:none;}
}

Ma non me le prende..

**Ciakko** · 23-04-2016, 17:15

Prova così:

codice:

@media screen and (max-width:700px) {
	#congallery {display:none !important}
 }

**Neomx** · 23-04-2016, 17:56

Eh questo lo ho già fatto per sistemare il resize che andrebbe bene anche sui dispositivi mobili ma il problema è che voglio far sparire un elemento SOLO quando lo visualizzo con uno schermo delle dimensioni di un cellulare. Se faccio così in effetti per il cellulare funziona, ma poi lo fa anche con il resize della finestra del browser..
In realtà è che non mi prende priprio il media.. può essere che faccia interferenza con il media del resize?
In pratica io ho i media per la dimensione massima della finestra (max-width) e volevo mettere un media per la dimensione massima dello schermo (max-device-width) ma non lo prende.

**Ciakko** · 23-04-2016, 18:11

Non so se possono convivere le due diciture per risoluzioni identiche, non mi è mai capitato di farlo. Potrebbe essere visto che hai problemi anche con il richiamo del foglio esterno, fai qualche ricerca si Google.
Se non risolvi il problema e hai bisogno solo di nascondere la tua gallery puoi spostarla con uno z-index basso oppure un posizionamento fuori dalla schermo, sempre che il contenitore abbia overflow:hidden.

Discussione: Richiamare foglio di stile su width-device

Strumenti discussione

Ricerca discussione

Visualizza

Richiamare foglio di stile su width-device

Permessi di invio