I have a web application that targets various devices including iPad 1,2,3. I use jQuery mobile to customize the UI.
I have a a jquery mobile . The image inside the checkbox is the 'home' and the 'search' image in iPad 3. It should have been the 'checked' and the 'unchecked' image however, like the way it works in iPad 1 and 2.
The resolution of iPad 3 is not the same as iPad 1 and 2 which is why this happens.
So how can I fix this having a common solution for all devices?
I found an answer to this.
In jquery mobile css there is a separate style for HD Retina. There you will find
-moz-background-size: 864px 18px;
-o-background-size: 864px 18px;
-webkit-background-size: 864px 18px;
background-size: 864px 18px;
Change the 864 to 776px. According to background image rules, the size specified here should half of the actual image. The actual image is 1552px. So half of this 776px. But jquery mobile code says 864, which is wrong.
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px; is the correct code.
FYI: https://github.com/jquery/jquery-mobile/issues/2224
Related
JSBin: https://jsfiddle.net/mnLw83ga/
Whether it was zoomed or not, the image was clipped by 1px on the top. It will return normal when the phone was in horizontal mode.
code :
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">
Sometimes the clip happened on the bottom, when zooming.
It looked like this:
safari image border-radius bug
Device Info: iOS 10.3.1 iPhone 6
Cannot recurrent on my iPhone 7
The clipping in Safari may be due to the version of Safari you're using. In Safari percentage values for border-radiusare only supported in 5.1+. I'd hate to think that that's the case with your version, however, it's possible. But on my end (Safari 11.0.2) it's coming through without clipping.
The safety would be to switch out the percentage for a fixed border-radius of 50px since your width and height are fixed.
img {
width: 100px;
height: 100px;
border-radius: 50px;
}
<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">
Here is what I need to do. I need to make a mobile app for ipad and iphone using phonegap and I need to set image background to all pages in the application. I was thinking to use a .png image in high resolution (the highest one I will be supporting), but I am not sure how to handle image re-sizing when the aspect ration is not kept. For example if I use image that is 1136X640 (iphone5) how it will look on iphone4 (res: 960 x 640). Or should I check the device and provide different images for different devices? Please help.
Use background-size propery in css3
e.g.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
IE hack (for lower than IE9)
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
It fits background image to your screen & still maintain aspect ratio of image.
Here is a good tutorial for you, Click Here
You can add the image as background in CSS like this :
body{
background-image:url('your_url');
background-size:cover;
}
This way it will fill your body
I'm working on a website, which features a high-resolution background image. The background image is set with the following CSS
#intro {
background: url(https://s3.amazonaws.com/ooomf-com-files/XIBPemROQ9iJdUMOOBmG_IMG_1863.jpg) no-repeat 50% 50% fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
When viewed on my desktop it works fine.
When viewed in Firefox' responsive view, it works as predicted.
However when viewing this on my iPhone 5 with iOS 7 installed, it will yield this.
There is something going wrong when setting the
background-size: cover;
but I can't seem to figure it out. I've already scoured the internet.
The site itself, in a development environment:
http://websites.terarion.com/ehlen/
And the place where I got the background:
http://unsplash.com/
Wow, it seems Mobile Safari does not support background-attachment: fixed (or, at least doesn't support it well...)
If you remove that, background-size: cover behaves as you expect, but it breaks the expected behavior...
There are some work arounds for Mobile Safari involving fixed-positioned elements behind the content to mimic background-attachment: fixed, if desired.
Off topic, but love the design!
My page has a full screen background image, using cover. On Windows machines this looks fine, but when viewed on a MacBook, the image looks stretched and "cloudy". Why has this happened? My CSS is below:
background: url("images/backgroundimage.jpg");
background-size:100% auto;
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
background-size:cover;
I think your Macbook has a retina display. That's why your image is getting distort and stretched. If that is the case, you need to use retina ready images (that is 2X larger that the image you are currently using) to solve this problem.
Here is a nice article about retina ready website. A guide for creating a better retina web.
Take a look. It might solve your problem.
I am having some serious trouble trying to get my sprites to show up right on a iPhone4+ using a high res (2x) version of my navigation sprite. Here's the code I'm using right now.
.pixelj a, .games a, .team a, .forums a {
width: 156px;
height: 35px;
background-image: url('/assets/blogtext2x.png');
background-repeat: no-repeat;
/* background-size: 156px 17px;*/
text-indent: -9999px;
overflow: hidden;
display: block;
float: left;
}
As you can see this is for a navigation where I have all the navigation word elements in a single sprited image. I tried using "background-size" but that just squished the whole sprite into the width/height provided. If I get rid of it it shows the 2x images but doesn't make them 50% so they view correctly.
What am I doing wrong here? Here's the #media query I am using to target high-res devices:
#media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx),
(max-device-width: 640px) {
You're absolutely on the right track here.
Essentially the process here with providing 'retina' graphics in a sprite via CSS is:
Set up your normal sprite, with the relevant positioning/etc within your CSS to feed to non-retina devices,
Set the background-size of this image,
Use a media query to feed the #2x variant of the image to those devices that support it.
There are a few key things to bear in mind:
setting background-size requires several declarations with different vendor prefixes to get the best browser coverage - see my code below to see what I mean
background-size is the size of the non-retina variant of the background image, not the size of the element it sits within. So, if the normal-size sprite image is 200px by 400px (and the high-resolution version is 400px by 800px), then it's 200px 400px that you declare.
background-size values are declared as <width> <height>.
You have to declare background-size in the first declaration, not in the retina media-query overwrite.
Although using #2x is becoming common-practice, it's not essential in web development: you could use a totally different image name.
It's very difficult to help you with your specific question without all the code, or a live URL to look at, but here's a high-level example.
In this example, I have a background-image which is 100px wide and 50px high which is positioned in the middle of the element
/* the element */
.element{
background: url(../img/site/background-image.png) 50% 50% no-repeat;
/* vendor-specfic declarations for background-size */
-webkit-background-size: 100px 50px;
-moz-background-size: 100px 50px;
-o-background-size: 100px 50px;
background-size: 100px 50px;
}
/* for retina users */
#media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2){
.element{
/* we only over-write background-image here */
background-image: url(../img/site/background-image#2x.png);
}
}
This will mean that those devices which fall into the second media query will load the #2x version of the background image, and will scale it to the background-size dimensions as declared.
Because the image is scaled back to the dimensions you set, if you're using sprites you only have to declare all the element's background-positions once as you usually would, and not twice to account for the larger retina graphic dimensions.
EDIT:
Having now seen your site, I can see exactly the problem you're having with your navigation:
The reason it looks like this is your CSS here (line 972 of style2.css):
.pixeljam a, .games a, .team a, .forums a {
background: no-repeat url('/assets/blogtext2x.png');
}
If you change that to background-image and remove the no-repeat, then it will work (otherwise background resets your previous background positions).
.pixeljam a, .games a, .team a, .forums a {
background-image: url('/assets/blogtext2x.png');
}