Css for iphone only

Css media query only on iphone code example

In terms of targeting just certain versions of the iPhone / iPhone 6, this post provides a helpful response: iPhone 6 and 6 Plus Media Queries To support all small devices, under the 667px mark, you can generalize your media query to: If you are testing this on your desktop, just with a small window size, the reason the max-device-width may have not been working for you is: width versus device-width In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. Two (or more) CSS files loaded using media queries on the link element Server side detection that adds different CSS links in the HTML Server side detection then a redirect to m.example.com, or example.com/mobile If you are talking minor changes (float:none, different font sizes etc) then I’d go for 1.

Media queries or conditional css for targeting safari on ipad/iphone?

Some (most) email provider rewrite the html/css on the webmail side. That means, it is likely that the css with the media query is parsed out. You can easily verify that, by using your regular desktop browser and inspect the code of the mail, or set some fancy colors and check out if it gets displayed.

However, I don’t think that it’s such a big use case that users view/access on a iphone their webmail. Is it?

CSS media query to target only iOS devices, Once you’ve detected the iOS device you could add a class to the area you’re targeting using Javascript (eg. the document.getElementsByTagName («yourElementHere») [0].setAttribute («class», «iOS-device»);, jQuery, PHP or whatever, and style that class accordingly using the pre-existing stylesheet. This is what I used. Code sample@supports (-webkit-touch-callout: none) <>@supports not (-webkit-touch-callout: none) <>Feedback

Best way to use Media Queries for Mobile Designs

There are (at least!) four ways to do this:

1. Normal CSS, with media queries at the bottom (so they override the CSS above)
2. Two (or more) CSS files loaded using media queries on the link element
3. Server side detection that adds different CSS links in the HTML
4. Server side detection then a redirect to m.example.com, or example.com/mobile

If you are talking minor changes (float:none, different font sizes etc) then I’d go for 1. If there are lots and lots of changes to the CSS, I’d use 2 or 3 (3 isn’t as good, as you rely on useragents, rather than screen properties). If the HTML and CSS changes, I’d use 4.

For all of this, check your work in Internet Explorer 6 — 8, they may ignore the media queries and use all the CSS, including the mobile bits if you use 1.

Have a look at http://mediaqueri.es/ for some examples of sites using 1 and 2.

Here’s another resource that might help: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

I would suggest not fooling around with mobile browser/device detection at all; this is where media queries excel. Think more organically, and instead of having to constantly update your website with new devices and mobile browsers, just use one CSS file, and utilize CSS3’s max-width/max-device-width.

Place in your header, and in your CSS file parse it into a desktop version and a mobile version:

/* Desktop Version */ @media screen < body < margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center; background-color:#900; background-image:url(../images/bg_white.png); background-repeat: repeat-y; background-position: center top; >> /* SmartPhone Version */ @media only screen and (max-width: 480px), only screen and (max-device-width: 640px) < body < margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center; background-color:#900; background-image:url(../images/m_bg_white.png); background-repeat: repeat-y; background-position: center top; >> 

I would not recommend option 3. Sniffing has been proven a bad choice time and time again. What happens when a device/browser presents wrong information? It’s easily hijacked.

Don’t do this. Media Queries all the way. It is the supported standard.

CSS @media Rule, CSS-Code;> meaning of the not, only and and keywords: not: The not keyword inverts the meaning of an entire media query. only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. Example. Use media queries to create a responsive column …

Media queries for iPhones are not working

In terms of targeting just certain versions of the iPhone / iPhone 6, this post provides a helpful response: iPhone 6 and 6 Plus Media Queries

To support all small devices, under the 667px mark, you can generalize your media query to:

@media only screen and (max-width: 667px)

If you are testing this on your desktop, just with a small window size, the reason the max-device-width may have not been working for you is:

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.

Css — Media query to target most of smartphone, I wrote some CSS code to make an HTML page fit better in mobile browsers. To be sure that my CSS apply only on mobiles, I use to following media query : @media only screen and (max-device-width: 480px) As an iPhone developer, I tested on this device and it works really well. But I want my CSS to be use on all …

How to target iPhone 3GS AND iPhone 4 in one media query?

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:

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 320×480, 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

Css — How to target iPhone 3GS AND iPhone 4 in one, 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 …

Источник

Css css code for targeting iphone only

Here’s an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ Solution 1: You could link different stylesheets to different media’s like so: This way you can create different CSS rules for all kinds of screen sizes etc. See this useful tutorial for further explanation: http://css-tricks.com/resolution-specific-stylesheets/ So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you’d want stylesheets that change according to the screen size.

Target mobile devices with CSS (iPad, iPhone) but exclude non-mobile devices

Maybe a look at this, at the section «7.3 Recognized media types» , will help you.

Yup: desktop browsers support the orientation media query too.

I don’t think media queries provide a way to detect whether a device is the iPad or the iPhone. They allow you to inspect features of the device (like its width and orientation), rather than identify the device.

What makes your styles inappropriate for non-iPad devices?

I found that all you need is the second media query in your edit:

@media only screen and (min-device-width: 320px) and (orientation: portrait), (max-device-width: 768px) and (orientation: portrait) < // some styling >

Iphone — targeting iphone4 with responsive design (css, That said, if I’m reading your question right, you’re asking how to target a retina display iphone using media queries for width. The answer is that you can’t — both the retina display iphone and the non-retina display report themselves to the browser as 320×240. The difference, as you noted, is that the retina display has …

Targeting Specific Style Sheets only for iPad and iPhone

To Targeting Specific Style Sheets iPad and iPhone Please put this code in your tag:

CSS media query to target iPad and iPad only?, So for anyone who did not understood what I meant, the total media query looked like this for portrait: @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) < //style >You need to target the device by its User Agent, using some script. The user agent for the iPad is:

How to make style sheet for tablet and iphone

There are too many mobile device models out there to write stylesheets for; you’d be better off adjusting your CSS based on Screen Size .

This is especially helpful for targeting Android Tablets which comes in different sizes.

See this useful tutorial for further explanation:

So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you’d want stylesheets that change according to the screen size.

Then you’ll add several stylesheets:

So iPhones would use the small.css, and tablets larger than 700px will use medium.css.

Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You’re much better off using media queries to detect device capabilities and then adjust accordingly. Here’s an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Targeting Specific Style Sheets only for iPad and iPhone, Since Safari browser for mobile devices (iPhones and iPads) doesn’t fully support Tahoma font,so want to set Arial font for iPhones and iPads only. So how can I set font type Arial only for iPhone

CSS or Javascript that can resize any HTML viewed on iphone

You could link different stylesheets to different media’s like so:

This way you can create different CSS rules for all kinds of screen sizes etc. This gives you a huge amount of flexibility.

A grid system would offer a lot of flexability. Most scale images and text (if necassary), and transform into smooth, mobile layouts.

I prefer the 1140 CSS Grid http://cssgrid.net/

I suppose that you can’t use max-width on the html- or body-element. It works with:

@media screen and (max-width: 480px) < #wrap < max-width: 320px; >> 

(further changes in #logo needed)

Target mobile devices with CSS (iPad, iPhone) but, Target mobile devices with CSS (iPad, iPhone) but exclude non-mobile devices. Ask Question Asked 10 years, 4 I literally just swapped ‘only screen’ for ‘only handheld’ in the code above. – mmmoustache. Apr 11, 2012 at 10:10 . I see you edited your question and answered to yourself, but you could be …

Источник