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]-->
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.
I have a mobile webapp that I am developing using jquery mobile. I am prompting the users that they can use the add to homescreen function to load the webapp from the desktop. When I test the functionality of the splash screen on my iPhone 3GS, the png file which I wish to load does not load with the splash screen, but rather, a "screen shot" of the site with a white-space at the top where it appears the address bar used to be.
Here is my code
<html><head>
<title>Page Title</title>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/mydashboard.min.css" />
<link rel="stylesheet" href="css/add2home.css">
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" />
<!-- ***Here is my code for splash screen*** -->
<link rel="apple-touch-startup-image" href="Default.png" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-land.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-port.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- ***My JS files are included under this and the closing of the head tag*** -->
I have tried a 320x460 and a 320x480 png file where the Default.png is. Neither have had any success. From what I've read, I think I'm doing this right, but I could be wrong. I'm basing my opinion on https://developer.apple.com/library/archive/qa/qa1588/_index.html
and
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
So my question is this, has anyone else seen this? If so, what was the cause and what did you do to resolve the issue if you did resolve the issue? If you haven't seen this particular issue, is there anything you might be able to suggest based on my code above?
The Default.png file MUST be 320x460px.
Try removing the launcher from the home screen and re-adding it from Safari.
That is what I had to do to get mine to work.
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.
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