I am looking at calling different CSS for desktop and iPad browsers.
For desktop, I am using
<link rel="stylesheet" media="only screen and (min-width:1000px)" href="desktop.css">
and for iPad, I use
<link rel="stylesheet" media="only screen and (device-width:768px)" href="desktop.css">
When I say desktop browsers, I am referring to IE8 and above, FF4+, Safari 5+ on MAC
But for some reasons, the desktop CSS does not get applied in IE8.
Please suggest the best approach such that I can clearly separate desktop/iPad and also it would work on all desktop browsers..
#testndtv; mediaquery is not work in IE. for this you have to use Response.js
The easiest way is to add
<!--[if IE ]><link rel="stylesheet" media="screen" href="desktop.css"><![endif]--> to you <head> tag.
Related
I have a weird problem, I hope somebody can help.
I have designed this responsive site and it works fine but on mobile phones it does a weird thing. Before the final site as it would be seen on a small screen it loads for a few milliseconds the site all messed up, with the sidebard above the main content, but afterwards it loads the right layout.
I wasn't worrying too much abuot this but later I realized that on iphones you could only see the messed up site, not the proper layout as it should be.
My media queries are like this:
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:479px)" href="css/screen-layout-small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:767px)" href="css/screen-layout-medium.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:959px)" href="css/screen-layout-large.css">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2">
Hope someone can help as I'm going a bit out of my mind here. Thanks!
I checked the site on my android phone now, i noticed this div( barritaloca) was not properly formatted in your media queries.
Its floating to the top page thereby causing the site to load abnormally.
You should correct that div and revert.
Meanwhile, post your css here for reveiew
Thanks
On iPhone5 Safari I am finding that most of the time my page renders using default fonts before a google web font loads BUT the page is not re-rendered when google fonts finish loading. I'm not seeing this problem in desktop browsers or WindowsPhone, on these platforms I have not seen any problems wrt fonts being displayed.
Do I need to use the webfonts API to manually tell the page to redraw somehow? This seems overkill so maybe I'm missing something?
I load the fonts in as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
I define some styles in a separate CSS file and then use these styles in the body of my page.
.defaultHeading {
font-family: 'Dosis', sans-serif;
font-size:36px;
color:#a02422;
font-weight:500;
line-height:36px
}
OK, I fixed all my problems by specifying the following in the CSS
#media only screen and (max-device-width: 480px) {
#main { -webkit-text-size-adjust:100% }
}
This stops Safari from resizing fonts on iPhone.
Hi so I have a media query that gets picked up by ios simulator
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="css/iphone.css">
What I would like to do is simulate this on firefox or chrome by resizing the browser, is this possible?
<link type="text/css" rel="stylesheet" href="css/iphone.css" media="all and (max-width: 480px)" />
You need to use max-width. max-device-width is the physical screen size so that won't change. See: What is the difference between max-device-width and max-width for mobile web?
However, that won't fully solve your problem for iOS because Safari reports a width (but not a device-width) of 980px by default, so pages not designed for mobile appear as a full zoomed-out page. So, you also need to add something like this to your HTML:
<meta name="viewport" content="initial-scale = 1.0">
You can find a reference from Apple on viewport settings here:
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Yes you can directly simulate this on Firefox and chrome. But Firefox doesn't support media queries below 480.
You can also check the below link for re-size in Firefox & chrome.
http://www.smashingmagazine.com/
Hope This Helps
when using
<link rel="stylesheet" media="all and (max-width: 640px) and (orientation:portrait)" href="css/i-hoch.css">
<link rel="stylesheet" media="all and (max-width: 960px) and (orientation:landscape)" href="css/i-quer.css">
on iPhone Mobile Safari the CSS is changed when device is rotated.
The same Page does not load the different CSS when this code is used within the PhoneGap Framework (0.9.5.1). We also had issues with the
<meta name="viewport"
which could be fixed but orientation problems remain.
Any hints how to solve this issue are appreciated. Thanks in advance - Alex
#alex, may be first you have check you css file link with firebug & if the path is correct then
write like this
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" media="all and (orientation:portrait)" href="css/i-hoch.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/i-quer.css">
may be that's helpful
I have a web page for which I made two css files, one for desktop browser and another for iphone.
I do it something like this:
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/css/main.css" media="screen,projection,print" />
<link rel="stylesheet" href="/css/mobi.css" type="text/css" media="only screen and (max-device-width: 480px)" />
On a desktop it works fine, but on iphone I Have some strange behavior, it looks like it loads both files and rules conflict with each other. If I comment out second line (main.css) it works fine on iphone.
so how can I hide it?
thanks
I included WHOISSTAN's php function example from http://mobiforge.com:
function is_mobile(){
$regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
$regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
$regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
$regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
$regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
$regex_match.=")/i";
return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}
Then I added this within my <HEAD></HEAD> tags:
<?php
if(is_mobile()) {
?><link rel="stylesheet" href="mobi.css" type="text/css" media="handheld" /> <?php
} else {
?> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> <?php
} ?>
use mobile detection in php or another server side script so that the other css is not there at all. here is a place to get a good script
http://detectmobilebrowser.com/
the script needs to be modified a lil. it comes in a if statment so if you put it in a function you can return a true or false. Then you can use it like.
if(mobiDetect()){
<link href="mobiStyle.css" />
}else{
<link href="style.css" />
}
You should let mobi.css apply handheld styles on top of main.css. Also, I guess media should be handheld for mobi.css, and not a bunch of text like you have now.
Mobile WebKit applies stylesheets with media type of screen, because it’s meant to behave like a desktop browser with some UI optimisations for mobile, rather than as a mobile browser.
You might consider serving different HTML to iPhone-like browsers, get around it that way. I don’t think there’s any reliable HTML- or CSS-based way to hide CSS from Mobile WebKit.
Ok, I found a solution and it is actually quite simple, just need to use media querys. Something like this:
<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobi.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/main.css' />
<meta name="viewport" content="width=device-width" />
<meta name="HandheldFriendly" content="true" />
We can change width depending on target device. It works fine on iphone (and most of other smartphones) and also works in all desktop browsers apart from our beloved IE:) to fix this issue just add:
<!--[if IE]>
<link rel="stylesheet" href="css/main.css" media="all" />
<![endif]-->