I recently put together a webpage for a client.
www.kinektd.ca.
Only when viewing on a mobile device the background banner images on the site get super zoomed in and pixelated.
Is there a mobile device media query I can add that ensures these images do not get zoomed in and pixelated on mobile devices?
Here is the css code that targets the background image;
.ts-home1-data-transferred{
background-attachment: fixed;
background-image: url(../images/background/main02_2-1920x1200.jpg) ;
background-repeat: repeat;
}
Can I target mobile devices and include certain coding that will solve the zoom issue?
Thanks in advance.
Related
Our website appears fine on a Mac. However, on an iPad, the home page slider images appear very very pixelated.
I've had a look at [this article][2] and changed the JPGs to progressive, and cleared the server cache, and the iPad Safari cache, yet the issue remains.
Help appreciated.
From this answer, using background-attachment: fixed with background-size: cover causes issues on most mobile browsers. You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using #media screen and (max-device-width: 1024px){}
OR
You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO
Maybe try to convert the image to a PNG or SVG and see if this helps. If you have a graphic designer have him do this or use one of the image converters on the web. JPEGs are compressed each time they're saved and this is a lossy compression so the image will artifact giving the pixelated look you're describing. If this solves the problem then you know it was a problem with the image itself. If it still appears pixelated then this may be a problem with the Ipad instead. I would then see if you can get a developer to set up an emulator for a different Ipad device, with Genymotion or with the built in emulator that comes with Android Studio, and visit your site on the emulator and see if the problem still persists. Hopefully this helps!
I am using shadowbox to display content in a pop-up window. When the content is longer than the screen size, scrolling appears in all PCs and Android device but it does not appear on any Apple devices (Iphone, Ipad, Ipod)
Can any one help me?
I know it's a bit of a late reply but I have just had the same problem and I though I would share my solution just in case it was helpful.
I created a scrollable div using css
overflow-y: scroll;
within the shadowbox frame and this enabled the content to be scrollable on the ipad.
Try this so it doesn't create double scroll bars on other devices target the iDevice.
$(window).load(function(){
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('#sb-body-inner').css({
'overflow': 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
}
});
I'm having an issue with the safari browser on ipad.
As I'm not having one by myself it's a bit difficult to try around, but I'm working on it.
The problem:
I'm having a background image fixed + background-size: cover
On all the browser on the desktop it looks fine. But the safari mobile on ipad shows the pic kind of huge and so really pixely.
The container has: (the most important)
width:100%;
background:url("...") no-repeat center center fixed;
background-size:cover;
I don't know how to fix it, do you have any idea?
Here you see a pic of the ipad:
I am trying to get a legacy web application to run "properly" on mobile devices (where "properly" mainly means tweaking CSS so that text is readable and superfluous images and effects are hidden). Due to various reasons (many graphics files which cannot be changed right now) I have decided on a width of 480px width for phones and 630px width for tablets, and 1024px for desktop browsers.
So far, I have created two CSS groups for smartphones and tablets:
#media only screen and (min-width:631px) and (max-width: 1000px) { ... }
and
#media only screen and (max-width:630px) { ... }
which each have a fixed page width (480 and 630 pixels respectively) and some parts of the page modified (for example, the phone version has a dropdown menu instead of a hover menu).
On desktop browsers, e.g. Chrome, this works fine - when I change the window width the page layout changes accordingly. On iPhone and iPad, however, this doesn't work fully:
the non-retina iPad (768 pixel width) shows a white border left and right to the (630px wide) page, the CSS is selected correctly though;
the retina iPhone shows the tablet version (since it has 640px width), but I want it to use the lower-resolution version. Same for other hi-res (say >140dpi) displays.
Other tablets and phone (emulators though) also mostly select the right CSS media query group but do not zoom the page to full width.
How do I get the page width always to occupy 100% of the available width, regardless of the device width; i.e. zoom the page to full width? I tried playing with the "viewport" parameter, but this is a fixed parameter that cannot be modified depending on user-agent or real device width (JS hacks that try to do this didn't work so far).
Any ideas welcome!
Am trying to juggle a pair of "then" and "now" JPEG images on an iPad running Safari. In my BODY declaration I catch onload and onresize and call JavaScript which looks at window.innerWidth and window.innerHeight. Problem is, Safari appears to report accurate information for landscape orientation of iPad but not for portrait. For landscape, Safari reports inner 981x644 and outer 1024x673. But for portrait, Safari reports inner 980x1185 and outer 768x929. My JavaScript looks at whether the orientation is landscape or portrait and then resizes the pair of JPEGs for side-by-side or top-and-bottom, respectively. But that doesn't work well when Safari is lying about the dimensions. Can anyone explain what is happening here? Thanks.
I cannot explain why it does so (it's driving me crazy as well)
But I can offer a solution to your problem: do it with CSS instead of JS!
You can do it using media queries to build a different layout for portrain and landscape:
#media all and (orientation: portrait) {
...
}
#media all and (orientation: landscape) {
...
}
and using CSS3 to auto-size the images while keeping their aspect ratio:
background-position: center;
background-repeat: no-repeat;
background-size: contain;
Here is a JSFiddle with all the required code: http://jsfiddle.net/BULxm/
Hele is a direct link to the results, for testing on an iPad: http://fiddle.jshell.net/BULxm/show/