In a page I'm making, I'm writing a secondary stylesheet for mobile devices that overwrites selected parts of the first stylesheet.
I'm using media queries in the following way:
<link rel="stylesheet" href="assets/ui.css">
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="assets/ui_mobile.css" type="text/css">
This works for iPhone. My goal is to create a query that will activate if it's an iPhone or Android, and then let the iPad use the standard desktop styling.
When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.
I've used many permutations of various widths, heights, and aspect ratios, but to no avail. Does anyone know a workable way of differentiating between these three?
Any suggestions are appreciated. Thanks!
When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.
I think you're misunderstanding how max-device-width works. Since the max-device-width of an iPad is 780px, it falls below the 800px limit just as validly as the iPhone does.
Try using physical measurements rather than pixels - what you are trying to do is restrict to small screens, independent of resolution. Try
max-device-width:12cm
Which will only match physically small screens, like a phone (no matter how high resolution), but not larger ones like tablets, regardless how the resolutions change in the future.
Related
When having a look at this site
this:
linebreaks correctly for small screens. It word wraps (adds a line break) for iphone 5c and ipad in landscape mode as well. Which is wrong. The sentence could finish in one line.
The font size seems bigger as well.
The word wrap / linebreak does not happen on my HTC One S in landscape mode.
Is there a tool that can help me figure out these irregularities?
Any idea what this problem is about?
Note: this gets used:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
EDIT I applied a fix on the website, so now I heard it looks fine. The answers given fix the problem (when applying 100% instead of none)
Apple devices (I might think also Chrome on Android devices do this as well) have a really funny way to render text on pages, the font increases in size automatically to retain the same "flow" in both portrait and landscape since it helps the user to do not lose track of the line it's currently reading.
The way to disable entirely the resizing is to use the following CSS rule:
html {
-webkit-text-size-adjust: none;
}
However this behaviour works only on mobile pages which are zoom fixed with the meta tag user-scalable=no and it breaks some desktop browsers while the desktop zooming
What you probably want is to keep the font-size constant through every zoom scale. If you add the following on your CSS, then you'll have what you're looking for.
html {
-webkit-text-size-adjust: 100%;
}
‑webkit‑text‑size‑adjust: 100%
Is the way to do it instead of
‑webkit‑text‑size‑adjust: none
Using none will break user zooming in various browsers.
Here's a good read about the topic: http://blog.55minutes.com/2012/04/iphone-text-resizing/
To build responsive and cross-device websites you can use online tools such as this emulator
However, in text case formatting and layout, a real emulator is needed.
X code can launch IOS sumulator and will give you a way to debug your local/remote website on any apple devices (smartphone and tablets).
By using this software, you will be able to understand/debug and correct your website.
Currently, all browser are more or less managing differently the rotating actions (lanscape<->portrait) and also fonts. So, I won't look exactly the same but your website will be very similar across all browsers.
In your case, first you need to stop all browsers to resize your text on rotation.
Simply add the following CSS code.
CSS
html, p, a {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
By the way, I checked your line break issue. Every thing is working on Iphone 4/5 on Ios 6X and Ios 7X.
But any way, you need in the future to check your website on IOS simulator
Here is a screenshot from safari for an Iphone 5:
I'm trying to get my responsive website to "respond" when on iphone or ipad for example... my css file is linked here - http://uximag.com/styles.css
All the responsive style is at the bottom of the stylesheet. it works fine while on a desktop but when I go to an iPhone it doesn't work?
Please let me know, I've tried a few methods and cant seem to figure it out.
JimmyRare's comment is a good one. Set your max width to be smaller (640px for iPhone5) and it should apply to your iDevices and your browser when it's shrunk down.
Another option is setting up the code in your HTML document, which isn't ideal in that it combines your HTML writeup with your styling, but it has the added benefit of letting you target the width of the screen's resolution and not the browser width:
<link rel="stylesheet" media="screen and (min-device-width: 640px)" href="640.css" />
I'm developing a web application that also has a mobile webapp.
I currently use :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This works great for both iPhone and iPad.
My problem is that I'm using fixed size font (e.g. 18px), but on iPad I would like for it to look exactly as on the iPhone just much respectively bigger.
Is there a way for me to define the viewport in a way that will fit iPhone, and on iPad will look the same just in bigger scale? (like zooming in)?
p.s
I also don't want to stop it from working on android, which it currently does :)
The mobile webapp could be viewed here: HocSpot Mobile, and the webapp here: HocSpot
Why not just use CSS media queries? That will work in a UIWebView.
#media screen and (max-width:1024px) {
// iPad rules
}
#media screen and (max-width:480px) {
// iPhone rules
}
Then you can just style the font sizes with CSS.
Try it out
http://lessframework.com/
I am creating an application in HTML and javascript for iPhone and iPad.
I would like to have a splash screen for both devices since they must have different dimensions.
I know that there is a link tag "apple-touch-startup-image" that allows you to specify the link for the splash screen image.
What do I do if I want to specify 2 different links? I put 2 link tags with rel="apple-touch-startup-image" and 2 different URL?
Will the mobile device take the correct one if I respect the naming convention here?
What are the sizes used for the iOS application splash screen?
Thanks!
Just figured out how to do this, and it's similar to the apple-touch-icon setup.
Here's my example:
<link rel="apple-touch-startup-image" href="iPhonePortrait.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="iPadPortait.png" />
Just set the "sizes" attribute to the specific width and height and mobile Safari should match it up correctly. You can see the various width/height values from the link you posted, too. Hope it works!
I don't believe this is possible on web apps. The naming convention in that question will not work, it is for native apps.
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;
}