Change style based on device type
-
Hello, I'm new to the web development world and I'm hoping someone can point me in the right direction. I have an asp.net website (I'm using a starterkit from www.asp.net). I want to apply a different stylesheet if the client is a mobile device. I'm using a plugin that gives me the client device's display settings. If the display is below a certain resolution I want to use mobile.css. Otherwise, I want to use default.css. My understanding is that the style gets applied on the server when a request is made, and the resulting html is returned to the client. But I want the decission as to what style gets applied to be made by the client. How can I go about using javascript to change the stylesheet on the fly? Or, if I'm barking up the wrong tree, is there a way for me to program this functionality in the codebehind (I don't think there is, as the decission would have to be made on the client...)? Thanks for your help! (I'm a total noob in this area!)
Ian
-
Hello, I'm new to the web development world and I'm hoping someone can point me in the right direction. I have an asp.net website (I'm using a starterkit from www.asp.net). I want to apply a different stylesheet if the client is a mobile device. I'm using a plugin that gives me the client device's display settings. If the display is below a certain resolution I want to use mobile.css. Otherwise, I want to use default.css. My understanding is that the style gets applied on the server when a request is made, and the resulting html is returned to the client. But I want the decission as to what style gets applied to be made by the client. How can I go about using javascript to change the stylesheet on the fly? Or, if I'm barking up the wrong tree, is there a way for me to program this functionality in the codebehind (I don't think there is, as the decission would have to be made on the client...)? Thanks for your help! (I'm a total noob in this area!)
Ian
u can do it in ur client script by adding dynamic CSS and removing old one. And also donot cache the css in client side. use CacheControl=no-cache for that CSS probaly in IIS as a header.
-
u can do it in ur client script by adding dynamic CSS and removing old one. And also donot cache the css in client side. use CacheControl=no-cache for that CSS probaly in IIS as a header.
Does the CSS need to be embedded in the HTML? Or can it just be linked to CSS on the server?
Ian
-
Hello, I'm new to the web development world and I'm hoping someone can point me in the right direction. I have an asp.net website (I'm using a starterkit from www.asp.net). I want to apply a different stylesheet if the client is a mobile device. I'm using a plugin that gives me the client device's display settings. If the display is below a certain resolution I want to use mobile.css. Otherwise, I want to use default.css. My understanding is that the style gets applied on the server when a request is made, and the resulting html is returned to the client. But I want the decission as to what style gets applied to be made by the client. How can I go about using javascript to change the stylesheet on the fly? Or, if I'm barking up the wrong tree, is there a way for me to program this functionality in the codebehind (I don't think there is, as the decission would have to be made on the client...)? Thanks for your help! (I'm a total noob in this area!)
Ian
-
Thanks! I'll give this a try.
Ian
-
Hello, I'm new to the web development world and I'm hoping someone can point me in the right direction. I have an asp.net website (I'm using a starterkit from www.asp.net). I want to apply a different stylesheet if the client is a mobile device. I'm using a plugin that gives me the client device's display settings. If the display is below a certain resolution I want to use mobile.css. Otherwise, I want to use default.css. My understanding is that the style gets applied on the server when a request is made, and the resulting html is returned to the client. But I want the decission as to what style gets applied to be made by the client. How can I go about using javascript to change the stylesheet on the fly? Or, if I'm barking up the wrong tree, is there a way for me to program this functionality in the codebehind (I don't think there is, as the decission would have to be made on the client...)? Thanks for your help! (I'm a total noob in this area!)
Ian
ibowler wrote:
I want to apply a different stylesheet if the client is a mobile device.
Put something like this in the <head> section of the page. <style type="text/css" media="all"> @import "./styles/layout.css"; @import "./styles/presentation.css"; </style> <style type="text/css" media="screen"> @import "./styles/screen.css"; </style> <style type="text/css" media="print"> @import "./styles/print.css"; </style> <style type="text/css" media="handheld"> @import "./styles/handheld.css"; </style> CSS 2 Media Types[^] The media=all would be a general layout (header, body, footer, navigation, etc.) and presentation (color, background, etc.) for any media and the specialized by device style sheets override the things specific to the particular device.
Simply Elegant Designs JimmyRopes Designs
Think inside the box! ProActive Secure Systems
I'm on-line therefore I am. JimmyRopes