How can I specify a different css file for mobile browsers?

I'm experimenting with updating our website to be "mobile friendly". I could use some help.
We use a lot of static HTML landing pages for things like links from email ads, etc. What I'm trying to do is have 1 landing page so the content/html page is always the same, but the page will detect what browser/device you are using and then load a different css file depending on what it is. But, we don't want to have to load the style info from the PC version if you're not on a PC.
What I'm doing now is specifying the media type in the css link, like this..
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css">
What's happening is it's loading the main stylesheet first, and then the 2nd one changes some styles if you're on a device with a max width of 480 pixels (like an iPhone). But since it's loading the PC styles first, it's making some things look screwy.
So, is there a way to say "If you're on a PC, load this stylesheet. If you're on an iPhone, load this one instead." .. without javascript? I don't trust javascript too much on mobile devices. I feel like this some simple little thing that I'm missing that will make it all automagically work.
We don't want to have different content depending on the browser, just different stylesheets. Can anyone help?

Hi
Would it be better to do 2 different stylesheets, or just one big one and add a section at the bottom like:
@media only screen and (max-device-width: 480px) { .styles {whatever: styles;} }
2 separate style sheets are recommended. The reason for this is that the Safari mobile browser, (as used in iPhone etc) will download any/all images specified in a style sheet even if they are not used or specified in a media-query rule, this is a know bug with that browser.
I'm also having a new issue where the style "clear: both;" doesn't seem
to be working right. I set up my top horizontal menu using float: left,
and there's a lot of links so on the smaller screen it wraps, which is
fine but now the wrapped links are floating over the page content...
This is one of the reasons that floats should not be used in style sheets for mobile devices, the only exception I know of is for small typographical feature such as 'pull-quotes', (and never use float: right;). It is also recommended to include a menu at the bottom of the page, (or at least a link back to the top).
It works, if I have the iPhone as portrait it looks great, but if I turn
it to landscape, everything is zoomed in. But if I switch back to
portrait, everything is the right size. Is there any kind of way to get
the landscape to have the normal zoom level? I know I can do
"initial-scale=1.0", but that is just for when the page loads, not if
you change it afterwards...
I have heard of only one recommendation to fix this and that is a page refresh on resize, but due to bandwidth limits now being implemented by many providers it is probably not a good idea, you could try setting -
maximum-scale = 1.0
as well.
PZ

Similar Messages

Redirect code to different css file for mobiles

i need some code that i can use to detect mobiles and then change to a css file for the page so it looks good on mobiles. ive been looking around and i can only find redirect codes to mobile versions on websites and i dont want that, i want to stay on the same page but just use a different css file. Thanks to anyone that can help me.

What you want are CSS Media Queries. They can be incorporated into your main CSS file like so. Feel free to adjust breakpoint values as required.
/* Special Styles for Mobiles. */
@media only screen and (max-width: 480px) {
    body { font-size: 75% }
/* Special Styles for Tablets */
@media only screen and (min-width: 481px) {
     body { font-size: 100%; }
/* Special Styles for Desktops */
@media only screen and (min-width: 1025px) {
     body { font-size: 135%; }
Nancy O.

How can I print mulitple different .ai files onto one page in Illustrator CS6?

How can I print mulitple different .ai files onto one page in Illustrator CS6? I have all of the files organized by Arrange Documents>Tile All in Grid and I would like to print the files in this format so that they can all be seen at once when printed out onto one page.
Some background is that I have 16 different cad drawings that I have converted and edited in illustrator. I'd like to basically make a contact sheet with all 16 drawings so that they can be reviewed on one sheet of paper after printing. But each drawing is in it's own unique file, and I have not figured out how to put them all onto one page for printing.

You can place them (linked) into a new Illustrator file and print from there.
The original files will need pdf compatability.

How can i use 2 different apple ids for imessage and facetime on 1 ipad?

How can i use 2 different apple ids for imessage and facetime on 1 ipad?

Do you mean can you use one Apple ID for FaceTime and one for iMessage? You should be able to. Or, do you mean, can you log into iMessage (or FaceTime) with two Apple IDs at once? No.

Can anyone provide a simple css file for Apex Application

Hi,
Can anyone provide a simple css file for Apex Application please don't mention W3schools link to learn...
Regards,
Pavan

in each item have ..HTML Form Element CSS Classes .e.g style="color:red", you can change whatever you want!
or using CSS at page header level.
check the page: http://apex.oracle.com/pls/otn/f?p=25110:3:0:::::
more css and JS file in Google drive(If my application/js/css breaks your computer, your database, your car's transmission anything it's your fault not mine, I have nothing to do with it and will deny all responsibility.)

How can get a database like ****.SQL file for test in sqlplus in oracle8i

How can get a database like ****.SQL file for test in sqlplus in oracle8i,I am a beginner,thanks

I'll give it a guess as to what it is you want but I'm afraid you'll have to give some more information to go on. I appreciate it's difficult for people who are beginners or who don't have English as their first language.
Are you trying to run a SQL file? From SQL*plus you can do either of these:
SQL> start my_file
or
SQL> @my_file
N.B.: if th efile has a .sql extension you don't need to include it, but you do for any other file extension e.g.
SQL> @myfile.run
Here is the page Vijay referred to:
Re: Physical storage Checks & adding disk on server. I hope you find it useful.
You will more helpful links (including links to the Oracle on-line manuals at this page:
Re: How to attach a java bean in forms6i
good luck, APC

How can you have multiple, different css link styles?

Every time I want to create a different looking link just for some copy, it always reverts to the A:link style, even if I create a new style that looks just the way I want. How can I create multiple link styles and then be able to select the one I want at any time???
I would greatly appreciate any help.
Allan

How are you applying the different styles to your links? In most cases, it's easiest to wrap the link(s) in an element, like a < div > that has a class or ID assigned, for instance class="altLinks". Then, set up the CSS style names like:
.altLinks a:link
...and so on. Then, the styles would just apply to links within the element(s) with class "altLinks". Here's a tutorial that might also help:
http://www.golivecentral.com/pages/tutorials.shtml#basicCSSlinks2
Otherwise, if you're still having trouble, post back with a link to your page so we can see what's going on.

How can I involve my own css file to aprex?

Hello,
I have created my own test.css file and now I want to include this file into my page. How can I do this? I have uploaded it to the application. The current link is:
<link rel="stylesheet" type="text/css" href="test.css">
But this doesn´t work. Can anybody help me?
Thank you. Stoefran

Stoefran,
Go to the page template and put in the header the following:
<link rel="stylesheet" href="#WORKSPACE_IMAGES#test.css" type="text/css" />
Denes Kubicek

How to specify a different config file for a weblogic 6.1 server

Hi,
I have 2 weblogic startup scripts (startWebLogic.sh and
startWebLogic_recovery.sh) for the same domain.
startWebLogic.sh uses config.xml file.
I would like to use config_recovery.xml as the configuration file for startWebLogic_recovery.sh
How would I do this ?
I am using WebLogic Server 6.1 on SunOS 5.8 / HP-UX 11.0.
Appreciate any help.
Regards
Gunaseelan Venkateswaran

Hello Gunaseelan,
This is not possible because WLS 6.1 needs a config.xml file, exactly this
name, to start.
What you can do is to define a recovery domain, called myrecovery_domain for
instance, and put the config_recovery.xml, renamed "config.xml".
Hope this helps,
Ludovic.
Developer Relations Engineer
BEA Support.
"Gunaseelan Venkateswaran" <[email protected]> a écrit dans le message
news: 3cd6a324$[email protected]..
>
Hi,
I have 2 weblogic startup scripts (startWebLogic.sh and
startWebLogic_recovery.sh) for the same domain.
startWebLogic.sh uses config.xml file.
I would like to use config_recovery.xml as the configuration file forstartWebLogic_recovery.sh
>
>
How would I do this ?
I am using WebLogic Server 6.1 on SunOS 5.8 / HP-UX 11.0.
Appreciate any help.
Regards
Gunaseelan Venkateswaran

How can i make hyperlink to local file for dowloading

How can I make hyperlink to a local file for downloading it, it seams that only www links work in web Ui.
Thanks

If we assume that you have a LabVIEW application running on your cRIO that is exposing some data through web services, there are a couple of possibilities.
You can create a web service call that returns the log data. In order for the browser to treat this as a file, you must set the correct content type in the http header. To do this you can't use the default form of data output. Instead you must create an "httpRequestID" input to your web service VI. With this you can call "Write Response.vi" to give the log data and "Set HTTP Header.vi" to specify the type (text/text probably works for a log). You can look at "examples\comm\webservices\address book\FindContacts.vi" to see an example of calling these 2 VIs. Once you create that web service entry point, you can set that as the URL of the hyperlink control and it should work.
Another option is to have the cRIO application write to a log file that is under the root of the web server running on the machine. (This is the same place the xap for your Web UI Builder application is put.) This file could then be served up through the web server just like any other file.
With either of these solutions there may be concerns about the browser caching results rather than requesting new content each time. There are additional values that can be set in the http headers with the first solution that can help with this, but I think there is still some variation between browsers.

How can I use a different Apple ID for Find My iPhone than for iCloud syncing/storage and iTunes purchases?

I use two different Apple ID's for two iPhone 4's and for iTunes on my PC. I use one for purchases and the other for Find My iPhone on both phones. How can I set up iCloud for both phones using each ID for it's user for storage and backup but keep one ID for purchases and one for Find My iPhone on both phones?

To better describe what I am needing:
1. - iPhone 1
2. - iPhone 2
A. - Apple ID #1
B. - Apple ID #2
On 1. I need A for purchases and iCloud and B for Find My iPhone.
On 2. I need A for purchases and B for iCloud and Find My iPhone.
In addition, will iCloud store text messages?

How can I Create a Client Configuration File for RemoteApp and Desktop Connection with Server 2012?

I have a working RDS RemoteApp site and looking to test out the feature in Windows 7 Control Panel\All Control Panel Items\RemoteApp and Desktop Connections
I came across this link: Create a Client Configuration File for RemoteApp and Desktop Connection and I believe this is what I need to do first, but these instructions are for
Server 2008, and I'm running 2012.
Any suggestions or tips on how I can begin testing this with Server 2012?

Hi,
You can manually enter the path to the 2012 feed and it will connect and download the RemoteApps and Desktop connections.
If you need a sample .wcx file I have posted one here a couple of times. If you want I will look for it and post a link.
-TP
I tried adding my URL's below, these are sample links that work for me right now for when I log into the web page, but neither of these work. And I'm not sure what I would need to do with or how to create a .wcx file.
When I type in my URL of: https://connect.mydomain.org/RDWeb, I get redirected to:
https://connect.mydomain.org/RDWeb/Pages/en-US/login.aspx?ReturnUrl=/RDWeb/Pages/en-US/Default.aspx

How can I get the directory.xml file for WL6.0?

I have installed the ALBPM Enterprise WL6.01 and started it in my server.But I get the error message when I login.
directory configuration runtime fails to initilize with
resource:/Aqualogic/j2eewl/tomcate/webapps/../../webapps/webconsole/WEB-INF/directory.xml
How can I get the XML file?

aaa, ok i misunderstood your first post, i thought you are talking about unable to use the directory.xml from your application.
Ok, well the directory.xml file that ALBPM uses is allways in /albpm6.0/j2eewl/conf/directory.xml if we are not talking about Standalone. And when you start your albpm server it picks up the directory.xml file from there. But it picks him up only when you start it...so if you made any changes to it, you have to restart the server.
You should check the instalation folder of your ALBPM.
If you want to change the user/pass in the directory.xml change it in that folder and restart ALBPM.
If you don't know how to enter new password you have to use this sintax:
<encrypt>newPassword</encrypt>
Because if you open the xml file you have only <encrypted> tags, and you can't change those.
I don't know what the xml file is doing in that tomcat folder though...maybe it get's copied to that location when you start the albpm WL
Hope this helps
Edited by Lex_ at 12/13/2007 10:27 PM

How can you specify a custom style class for an ADF component (column)?

We are using ADF 10_1_3_3_0 on Tomcat.
We would like to specify an additional style class for a column header. We have specified the following style:
{color:#808080}af|column.formHeader::header-text
text-align: right;
background-color:brown;
border-color:#999999;
font-family:Verdana,Arial,Helvetica,sans-serif;
color: blue;
}{color}
{color:#808080}<af:column sortable="true" formatType="text" styleClass="formHeader">{color}
This does not seem to work. In our tests, the CSS gets generated but the new style class for the column header does not seem to be generated/mapped. I reveiwed this post: Re: Jdev 11g: how to set width of some components on panel form layout. Is this specification (component.className::selector) applicable for the 10g version of ADF?
Additionnaly, are their specifcations/details for these selectors (e.g. ora-rule-ref, -rt-rule-ref, -tr-rule-ref). I am not clear on what they are mapped to and how they are used.
Thanks
Edited by: user10477345 on Oct 27, 2008 6:48 AM

Hi,
The column's style classes will be added on the <td> elements, not the header sadly. So for your use case you'll have to place the class on the table itself then use the selector
af|table.MyStyleClass af|column.formHeader::header-text{}Sadly this will affect all columns, not just one so I don't know if it's going to fir your need.
Regards,
~ Simon

How can I use a different search path for FlexRIO IO modules?

I want to use an IO module that is outside of the LabVIEW tree, but it seems like LabVIEW only searches in shared/flexrio/IO modules, and I can't figure out how to create symlinks in windows.
Is there a variable I can set somewhere to include other search directories for the IO modules?
//Olof
Solved!
Go to Solution.

Hello Olaf,
There are two locations on your Windows computer that are searched for FlexRIO adapter module support files. The first is the Program Files directory you have indicated in your post; this directory holds the support files for NI manufactured adapter modules. However, there is another directory that can be used for the location of any non-NI manufactured adapter modules. For Windows XP this location is: C:\Documents and Settings\All Users\Documents\National Instruments\FlexRIO\IO Modules. If you are attempting to install support for a non-NI manufactured adapter module, please ensure that you have installed all of the adapter module support files into this folder.
If you would like more information on this as it pertains to a custom adapter module development, please email the support email address listed in your Module Development Kit Manual. This email address will give you direct access to the NI FlexRIO R&D team for support as indicated here. If you want to discuss adding the ability to search other directories for adapter module support (other than the two listed above), please email the MDK support email address.
Regards,
Browning G
FlexRIO R&D

How can I specify a different css file for mobile browsers?

Similar Messages

Maybe you are looking for