I have a wordpress site and I'm trying to make a style sheet for mobile devices but it doesn't seem to work. This is the code I used
<link media="only screen and (max-device-width: 320px)" href="mobile.css" rel="stylesheet" />
I used mobilephoneemulator.com to test the site but it doesn't seem to be using the mobile css. What is wrong? if it helps my site is http://www.deliciousmanga.com
Link to mobile.css normally <link rel="stylesheet" href=".....etc
Wrap the entire mobile.css stylesheet in this block
#media screen and (max-device-width: 320px) and (min-width: 0px), (max-width: 320px) {css goes here}
Related
I just finished up the stylesheet of a website.
Then i thought of opening it up on my iphone and the design was totally screwed up.
This is nothing new really. But normally the solution is to add a min-width to my body.
But.. this time the iphone seems to ignore it.
Can someone please tell me what i am overseeing? I'm sure there is a simple solution!
Site can be found here:
http://77.72.144.173/~braaaf/index.php
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS:
#media screen and (min-width: 769px)
{
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px)
{
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
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">
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
Is there any way to tell a UIWebView not to load images and CSS for faster rendering?
Solution: URL filtering for UIWebView on the iPhone
Use media queries. The first one says "if it is not an iphone, use the normal style sheet", the second says "if it is an iphone, implement style rule: don't display images" :
<link type="text/css" rel="stylesheet" media="not (max-device-width: 480px)" href="normalstyle.css">
<style type="text/css">
#media (max-device-width: 480px) {
img {
display: none;
}
}