I'm working on a WordPress site & the background image isn't displayed correctly on iPhone & iPad, could someone please direct me as to what I should place in my CSS stylesheet to have the iPhone & iPad exclude the background image entirely?
Your help is much appreciated.
EDIT I've added this to my stylesheet.css, but it still isn't working correctly.
/* iphone 5 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
background-image: none;
background-color: #ffffff;
}
/* iphone 2-4 */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
background-image: none;
background-color: #ffffff;
}
/* ipad mini */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
background-image: none;
background-color: #ffffff;
}
/* ipad 1-2 */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
background-image: none;
background-color: #ffffff;
}
You'll need to add a separate stylesheet and add it if the user agent string matches an iPhone or iPad.
IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
IS_IPHONE = false;
}
You could do this with Javascript
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
document.getElementById('myDiv').style.background = "none";
}
you're trying to remove the background image but from which html element? on your media queries you have this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
background-image: none;
background-color: #ffffff;
}
but you are not specifying what background image from which html element should be remove.
let said that you are trying to remove the background image from the body. then you could do this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
body{
background-image: none;
background-color: #FFF;
}
}
as an option you could change the regular background image that you're using and change its size so it works on iphone, then you could call that image using the media queries for iphone.
Related
I want to set one page on my application to orientation:landscape and this is how i am doing it. My code below doesn't do the trick. What am i missing out?
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1281px)
and (orientation : potrait)
{
html {
transform: rotate(-90deg);
}
}
When using CSS, I can properly align my elements using css with Chrome. In chrome inspector-> ipad view, all looks as they should be. But when I test it on actual iPad, some CSS are not applied. I've found ipad specific CSS media queries as follows,
** /* Safari 7.1+ */ **
_::-webkit-full-page-media, _:future, :root .my-class {
padding-right: 0;
}
**/* Safari 10.1+ */**
#media not all and (min-resolution:.001dpcm) { #media
{
.my-class {
padding-bottom: 0;
}
}}
**/* Safari 6.1-10.0*/**
#media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { #media
{
.my_class {
padding-bottom: 0;
}
}}
Problem is, while they're working fine with portrait mode, There is no specified way for me to apply CSS into landscape mode. How can I use media queries for landscape mode in real iPad device/safari on iOS? Without affecting any other browser?
Update
I'm not looking for standard media queries like,
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES */ }
Landscape Mode
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES */}
What you are looking for cannot be achieved with media queries alone, you must use Javascript to find an Ipad Safari user agent:
function isiPad() {
return (
(navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1)
);
}
Using this Javascript, you can detect if the device is an Ipad, and apply a class on the body - using Jquery in the following example:
if (isIpad) {
$('body').addClass('isIpad');
}
Afterwards, write your media queries as suggested above:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.isiPad .myclass {
/*styles*/
}
}
Although I can see why an iPad differentiation is needed, I can't understand why a Safari differentiation is - so, a user would visit the same webpage/webapp with Safari and see something different compared to Chrome or Opera or a different browser? :/ UX-wise doesn't sound right.
You should try this one first as it covers current Safari versions and is pure-Safari only:
This one still works properly with Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
color:#0000FF;
background-color:#CCCCCC;
}
}
here is one I worked out for Safari 10.1+:
The double media query is important here, don't remove it.
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) { #media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Alternate method:
/* Safari 11+ */
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none)
and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
To use them:
<div class="safari_only">This text will be Blue in Safari</div>
And also you can make use of JavaScript to detect the browser and append a specific stylesheet if its Safari, for eg:
var isSafari = /Safari/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css"
href="path/to/safari.css">')
};
I'm trying to hide one CSS file called balloon.css on mobile devices. I'm using this balloon.css: balloon.css
My code:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){[data-balloon] { visibility: hidden; }}
Thanks guys for helping!
Since balloon.css uses pseudo classes for hover effect you need to hide those in your media queries.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
[data-balloon]:after,
[data-balloon]:before { display: none; }
}
This should work.
If you want to hide a certain script of css on mobile use resolutions
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.data-balloon {
display: none
}
use display none, for no display.
i have done the website it is working fine in all the mobile devices but in Iphone5 the font size not accepting. it is bigger and bolded than what i have give in css code. below the code i have given for common
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
so i want any specific code do i need to add for IPHONE 5. thanks
In order to target mobile devices, you will need to make sure you have the following in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And then add the mobile media query in your stylesheet:
#media (max-width:767px) {
/* Add mobile specific styles here */
}
I know in your question you want to target only an iphone5, however it is a good idea to add one media query to target all mobile devices and you won't have any issues and can add styles for mobile only within said media query.
Edited Answer
/* iPhone 4/5 portrait mode */
#media (max-width:320px) {
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
}
/* iPhone 4/5 landscape mode */
#media (min-width: 321px) and (max-width: 480px) {
*/ Styles go in here */
}
Add this medai query for iPhone 5 only
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
I'm not sure if it is the best way to do this, but you can set styles in js/jQuery when detecting iphone.
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
/*set some style here*/
}
});
Also, if your text is too big on iphone, you can try:
-webkit-text-size-adjust: 90%;
Anyway, Helvetica Nue is not standard font, so if you won't use external fonts import, they can look diffrent on some devices.
I am writing a media query for a web-page and managed to write media queries for 480px and more. But when I write media query for 320px it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working with landscape views in these devices but doesnt scale for portrait views. Can anybody please point out the error in the query. This is the media queries I used.
#media (max-width: 320px)
{
html
{
font-size:0.1em;
}
}
#media (max-width: 480px)
{
html
{
font-size:0.20em;
}
}
#media (max-width: 767px)
{
html
{
font-size:0.38em;
}
}
#media (min-width: 768px) and (max-width: 979px)
{
html
{
font-size:0.65em;
}
}
#media (min-width : 980px) and (max-width:1025px)
{
html
{
font-size:0.7em;
}
}
For 320px I also tried with
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
and
#media only screen
and (max-width : 320px) {
/* Styles */
}
But none of them is working.Am I doing anything wrong/missing something?
Thanks in advance
Since you don't have a min-width on your 480 styles, and since those styles come later in your stylesheet, they override anything you put before them.
#media (max-width: 320px) {
html {
font-size:0.1em;
}
}
#media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
A
#media (max-width: 320px)
{
html { font-size:0.1em; }
}
B
#media (max-width: 480px)
{
html { font-size:0.20em; }
}
Using the above, consider a 320px viewport.
A and B are true, as 320 hits the limit of A and falls well below the max of B. But since B overrides A by being declared later in the stylesheet, font-size is dictated by the later declaration -- B
Adding a min-width:321px requirement to B would force B to test false for the 320px viewport -- so font-size would stay at 0.1em until B became true (minimum width of 321px).
EDIT (maybe a better way to think about it)
Instead of using max, max, max, why not take advantage of the min-width, until you reach a UI that may be best served with a range (like a tablet)
/* Set a base */
html { font-size:62.5% }
/* iPhone landscape range */
#media (min-width:321px) and (max-width:480px) {
html { font-size:1.2em }
}
/* larger than iPhone landscape, an in the iPad portrait range */
#media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait */
#media (min-width:769px) {
html { font-size:2em }
}