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
Related
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 these 2 rules:
<link rel="stylesheet" media="screen and (max-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
They work on my browser (when I adjust the browser width) but when I check them on my iPhone, either portrait or landscape, it loads both style sheets.
Why on landscape view it loads the 640px style sheet?
the web view size of iPhone safari browser is either 320x480px or 480x320px in landscape for both display type. so the web developer don't need to resize his css for Non-Retina and Retina Displays.
For targeting only Retina Display
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
In your case the the second style sheet is loaded because in both cases (320 or 480px) your web view is under 640px.
i would recommend to use orientation as css media query for you case.
Add this in the head of your HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Write max-device-width instead of max-width
<link rel="stylesheet" media="screen and (max-device-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-device-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
Also, it's better if you define their orientation like this:
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
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
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]-->