I am using a wordpress theme in "responsive-design mode". Viewing website on iPad renders the way it should (including desktop, non-responsive), but viewing on iphone gets messy. Can someone help me figure out how to duplicate the iPad style to the iPhone and all non-desktop devices; and delete the smartphone styling completely. I am looking to duplicate the exact layout as the iPad for all mobile devices (just smaller versions). The author of the theme told me to look in the "responsive-all.css" file and fix things there, but I'm having trouble since I'm not well versed in css. Here is the link to the css. responsive-all.css
Any help is MUCH appreciated. Thanks
Michael
Step 1 : if you want to delete the mobile's view, just comment the end of the CSS file beginning with or delete and of course the following :
/*
* -------------------------------------------------------------------------------------------
* MOBILE BOTH VIEWS
* -------------------------------------------------------------------------------------------
*/ #media only screen and (max-width: 767px) {
...
Step 2 : Then change, the condition to get the same design for tablets/smartphones :
/*
* -------------------------------------------------------------------------------------------
* TABLET PORTRAIT
* -------------------------------------------------------------------------------------------
*/ #media only screen and (max-width: 979px) {
After, I don't know what you want on this mobile/tablet view exactly.
Replacing your current viewport meta tag with the following will probably make the iPhone (and most other mobile devices) look like the iPad:
<meta name="viewport" content="width=768">
Related
Im trying to finalize this website, and somewhere during the time i was tidying up the code i messed up how the background looks on the ipad and iphone. It looks fine on all other browsers including the native android. theres a slight bug on firefox but im working that out now.
Website in question: http://morzi.com/constantine/
The bio page has a link to an ipad css but just ignore that i was just fooling around trying to fix the issue.
Thanks!
I'm not sure where to begin, and I'm not sure what software you are using to code this but it's definitely not hand coded :s.
Anyways, your CSS is really screwed up.
Three solutions:
Hand code the CSS and in this case you can play around with the background position which will align the background with the content, then you can redesign the picture to see the person on the left.
background-position:top center;
Restructure your HTML and CSS to have the website work in compartments:
|aside|article|aside|
<aside id='left'></aside>
<article></article>
<aside id='right'></aside>
<style>
aside#right,
aside#left {
width:5%;
}
article {
width:90%;
margin:0 auto;//centers the div
}
</style>
Create a media type for mobile devices with specific width like so
#media only screen and (max-device-width: 480px) {//Iphone and below
//css for mobile device
}
#media only screen and (max-device-width: 768px) {//Ipad and below
//css for mobile device
}
I hope this helps and good luck to you :D
I've been having an issue with font rendering in mobile Safari (Safari on my Mac renders fine). I'm using an OpenType font along with the #font-face selector and some of the characters (mainly just 's' and 'c') are appearing a lot more thin than others (very noticeably so - relative to each other one looks 'light' and the others look 'bold'. The weirdest thing about this is that it's only happening in landscape mode. Has anyone seen this before? The only thing that makes this go away is to set -webkit-transform: translate3d(0,0,0); on the body selector which seems completely wrong, but may give a bit of insight into the problem. I came across that on another site: http://openradar.appspot.com/11097956.
Thanks in advance for any help,
Brandon
This looks like what you need:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
They used this code to fix it:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
How to detect the browser width and move elements depending on size?
Similar to Mashable - http://mashable.com/2011/07/24/google-plus-jobs/
An old question, so answering on the off chance that someone else may stumble across it. I would recommend the usage of CSS media queries and looking into responsive web design where the design of the page is tailored to the device based on screen size.
More specifically, looking at the following CSS properties to load different CSS rules:
min-width:
max-width:
min-device-width:
max-device-width:
For example, you may target smart phones in the following manner:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Above example taken from http://www.databasepublish.com/blog/rendering-content-adaptively-responsive-web-design-and-css3-media-queries which has a few nice rules.
I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.
I have established that the best method is to use #media from the CSS3 spec.
As such these are my media queries at the minute:
#media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
#media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
#media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
#media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,
Therefore making my question;
How do I create an #media rule that points both the iPhone 4, 3GS and other mobiles to the same styles?
Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:
#media only screen and (max-device-width: 480px) {
/* iPhone CSS rules here */
}
You'll only need (-webkit-min-device-pixel-ratio: 2) if you need to target the Retina display separately.
BoltClock's answer seems pretty good to me at the moment.
However, thinking in to the future, if Apple (or another manufacturer) releases another device with a device pixel ratio of 2, this media query would be used for this device too.
I don't think it's out of the question to assume that this will happen, and that the new device could have a much larger screen, such as an iPad with a retina display.
To make this query only applicable to the iPhone 4 and previous iPhones (and any other device of a similar size)
#media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone CSS rules here */
}
Unsure of [[IPHONE_4_WIDTH]] right now - don't have one on me, and some sites say 480, some say 960. Try replacing with both. (And let me know what you find :) )
I have been hunting for a way to specifically target the iPhone 3 / 3GS per the second part of the request. The most acceptable solution I've found is to tailor the media queries to the fixed parameters of an iPhone 3.
#media only screen
and (device-width:320px)
and (device-height:480px)
and (-webkit-device-pixel-ratio: 1) { ... }
In order to work this query requires that you use Safari's viewport meta tag to fix the browser to 100% with the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are a small number of Android phones that will also get picked up on that query. With the Android Market showing 18.4% of active phones in the potential screen size range of 320x480, only a subset of that will match the device-pixel-ratio on the stock webkit browser. Not perfect, but better than nothing at all.
Lists of phone resolutions
Slightly outdated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
Only 3 listed as a potential match here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
Android Market weekly snapshot: http://developer.android.com/resources/dashboard/screens.html
All information was considered as of post date.
Also per mernen's comment #2 to his post here are the docs to target Android devices by pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS
I'm not sure I follow your question. Did you try your queries on the iPhone 4? device-width is measured in logical pixels, not physical ones, so the iPhone 4 still fits the max-device-width: 480px criteria.
Same goes for high-end Android smartphones, which have a pixel ratio of 1.5: the Nexus One has a physical screen of 480x800, logical screen of 320x533.
I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file:
#media handheld {
body {
color: red;
}
}
But it doesn't seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on the iPhone etc, ideally without using javascript?
You can use #media queries:
<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>
This particular version will target the iPhone (and any other device with a screen of max-device-width of 480px.
Apple, for the iPhone, though this is from memory so I can't be entirely sure of its accuracy, chose to disregard the use of handheld or mobile stylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I'm unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.
Edited in response to comment, from #Colen:
Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query.
I'm unable to say for certain, since I've no access to those devices, however another A List Apart Article: Responsive Web Design notes that:
Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk.
So I presume that they, Android devices, must be target-able by #media-queries, but, as noted, I'm unable to say with any certainty.
To target device-resolution, there is an example of:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />
Further reading: W3 Candidate Recommendation for media queries.
From this site there are a few other media queries that are useful in targeting iPhones/Android Phones:
// target mobile devices
#media only screen and (max-device-width: 480px) {
body { max-width: 100%; }
}
// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
// CSS goes here
}
// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
#media only screen and (min-resolution: 300dpi) {
// CSS goes here
}
I was able to successfully use the max-device-width media query to successfully target Android phones, although I had to adjust the width up to 800px rather than the 480 listed. For iPhone 4, the -webkit-min-device-pixel-ratio worked to target the iPhone4 (max-device-width: 480px did not, I presume that will target the iPhone3 but didn't have one handy to test.)
I can see this getting quite messy, but if you have to support a multitude of devices and have custom CSS for each of them, as long as they support media queries it appears as it is possible to do what you have to to tweak each platform. And yes, I would code to standards first, so that as much CSS is resuable, but many times we are talking about presenting alternate layouts these days sized appropriately for the devices being used.
#media handheld refers only to those ancient tiny proto-html cellphones from years past which couldn't even really display web pages. The ePUB, MOBI, Tablet, community of vendors all said emphatically "H*ck no, we are not #media handheld devices!" because they were correctly worried that this would land them forever in a no-man's land subservient to "real" web pages.
With today's small devices with very high resolution displays we still don't have a good way to tell HTML how to display things "correctly" on large displays with relatively low resolution vs. small displays with very high resolution. And as a certified old fart my eyes would like to remind you that no, the answer is not just to make everything including fonts 2X smaller.
No, neither iPhone or Android browsers supports CSS #media handheld.
Look at using the media query 'hover'.
Put this in your SCSS file:
// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);
.some-class-you-want-to-target {
// Some CSS to only apply to larger screens with mouse available.
#include breakpoint($point-at-which-use-large-screens) {
color: red;
}
}
After running grunt etc on the SCSS this will produce CSS looking like:
#media (min-width: 991px) and (hover: hover) {
color:red;
}