css - Issue of overriding Desktop styles in iphone -


i have created asp.net mvc application run on iphone,ipad , desktop. when try run application in iphone desktop style overriding iphone styles. how can avoid this? have put desktop styles on top pf page below.

 <link href="@url.content("~/content/desktop.css")" rel="stylesheet" type="text/css" />     <link type="text/css" rel="stylesheet"  href="@url.content("~/content/jquery.mobile-1.0.min.css")" />     <link type="text/css" rel="stylesheet"  href="@url.content("~/content/mhome-style.css")" />     <link type="text/css" rel="stylesheet"  href="@url.content("~/content/bib.css")" />     <link type="text/css" rel="stylesheet"  href="@url.content("~/content/jplayer.blue.monday.css")" />      @* styles iphone *@     <link type="text/css" rel="stylesheet" media="only screen , (min-device-width: 320px) , (max-device-width: 480px)" href="@url.content("~/content/iphone_portrait.css")" />     <link type="text/css" rel="stylesheet" media="screen , (min-width: 321px) , (max-width: 480px)" href="@url.content("~/content/iphone_landscape.css")" />     @* styles ipad *@     <link type="text/css" rel="stylesheet" media="only screen , (min-device-width: 481px) , (max-device-width: 1024px) , (orientation:portrait)" href="@url.content("~/content/ipad_portrait.css")" />     <link type="text/css" rel="stylesheet" media="only screen , (min-device-width: 481px) , (max-device-width: 1024px) , (orientation:landscape) " href="@url.content("~/content/ipad_landscape.css")" /> 

i'm not knowledgable asp.net, looks problem fixed putting min-width media query on desktop stye-sheets, don't loaded on smaller devices.


Comments