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
Post a Comment