Versão Mobile VS Versão Desktop

[sergio.costa 0]

Boas pessoal...

Sou novo nestas andanças e estou com um problema que está dificil de resolver.

Estou a criar um site para colocar no webserver de um automato e estou a criar 2 versões Mobile e Desktop

Andei a pesquisar no TUBE como se faz isso e a maioria das pessoas usa o codigo abaixo.

acontece que na versão mobile funciona tudo 5 estrelas mas no browser desktop o browser está assumir o CSS da versão mobile

 

        content="width = device-width user-scalable=yes, initial-scale=0.8, maximum-scale=2.0, minimum-scale=0.5">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 413px)" href="./css/application_Desktop.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 300px)" href="./css/application_Mobile.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 413px)" href="./css/Index_Style_Desktop.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 300px)" href="./css/Index_Style_Mobile.css">

Quando tento inspecionar os elementos percebo que o browser está a assumir o "./css/application_Mobile.css" e não o "./css/application_Desktop.css"

Alguem me pode ajudar?

 

[Rui Carlos 359]

Assim de repente, parece-me que estás a dizer para usar os estilos de desktop para dispositivos com pelo menos 413px, e os estilos de mobile para dispositivos com pelo menos 300px.  Qualquer dispositivo "desktop", com pelo menos 413px, também terá forçosamente mais de 300px, logo estás a dizer que os estilos mobile se aplicam aos desktops também.  E como no CSS as últimas declarações ganham, acabas com os estilos mobile a serem aplicados.

Inverter a ordem das declarações deve resolver o teu problema.

[sergio.costa 0]

Boas... 

Desde já muito obrigado pela resposta.

Realmente era esse o problema. Troquei a ordem e ja ficou resolvido... 

Este é um daqueles casos em que se copia mas copia-se mal... 😁