I'm on an iPhone 5... I started updating my website, to use retina images. Everything works perfectly in Safari. For some reason, my background-image for the body isn't using it, and its super blurry. Any ideas? Is this a bug? This is what I have for the media query for retina displays:
body {
background:
url(../images/logo.png) no-repeat,
url(style/images/dark/bg5.jpg) 50% 0 no-repeat,
url(style/images/dark/bg5_repeater.png) repeat bottom;
background-attachment: fixed;
background-color:#09273e;
color:#e4e4e4;
background-position: 15px 10px, top, bottom;
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
body, #header {
background: url(../images/dark/bg5_repeater#2x.png) repeat;
background-size: 70px 70px;
}
}
Here is the link to the file and code line, on my bitbucket: http://bit.ly/Sxevfg
Here are some screenshots too between Safari and Chrome on iOS 7.1.1.
Thanks so much
Could be that the image was not saved as a progressive image. When saved as progressive, it fixes the issue.
Chrome renders pages with Safari's engine (the only browser engine Apple allows on iOS), so this must be a difference between in-app Safari (UIWebView) and actual Safari.
But my answer is that you should not be implementing a retina tax. Are double-resolution images really worth doubling the user's mobile data usage, or doubling your page's load time?
(If work on the Network Information API continues, maybe we'll get media queries for bandwidth...)
Related
I have an xcode project with html files. I am embedding a google doc using an iframe, but when I run the simulator, the width overflows on the right for iphone 6 and larger. It looks fine on iphone 5.
I've tried to change the margins in google docs and attempted some styling of the iframe.
iframe {
width: 100%;
display: block;
}
<iframe src="thesrc"></iframe>
I have also tried to embed it a container, but that didn't work either. I'm not sure if it's a css issue or I can't get a responsive iframe within xcode. Again, seems to be working fine on iphone 5.
If I understood your question correctly, I think you need to provide the correct media CSS rules. I don't know though if you can this in the external html of an iframe.
to perform media queries, you can do something like
#media screen and (min-width:500px) {
body {
margin: 0 auto;
width: 768px;
}
}
I tested my website application on both my iOS devices and my Windows PC, along with the Google Chrome device toolbar. Any fixed elements inside the iFrame are fixed when using the website application on my Windows PC and Google Chrome device toolbar. However, any fixed elements inside the iFrame are not fixed on iOS devices. Apparently this could be a bug that iOS devices have and was wondering if there is a solution so that elements that are suppose to be in a fixed position are actually fixed on iOS devices. Here is the CSS code I have:
/* Div that contains the iFrame */
#interactWithNav {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
filter: blur(5px);
display: table;
text-align: center;
}
/* iFrame that loads the page with the fixed elements */
#interactWithNavFrame {
border: 0;
width: 100%;
height: 100%;
}
If it were me, I would create a targeted test to prove these theories and show them.
I'd make a mini website with a fixed position element, and an absolute element (for good measure)
http://codepen.io/sheriffderek/pen/xqaYqM
Then I would make another mini website with an iframe of the source of that previous website example(in this case the debug CodePen version) http://s.codepen.io/sheriffderek/debug/xqaYqM
http://codepen.io/sheriffderek/pen/GWXQBN
Send this link to your phone:
http://s.codepen.io/sheriffderek/debug/GWXQBN
Then I'd use the debug version of that to test on the iPhone or whatever.
<header>
<h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
header....
<div class='fixed-thing'>fixed-thing</div>
</header>
<main>
main
<div class='absolute-thing'>absolute-thing</div>
</main>
and then...
<main>
<iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>
Everything seems normal to me.
Can this help you explain the issue a bit more? Are you using any transform: translate in your code? Why are you positioning the iframe in an absolute container?
It appears that the iFrame is automatically full height on iOS no matter what you set it to, so no scrolling, which means fixed wouldn't even be detectable... See this thread: How to get an IFrame to be responsive in iOS Safari?
My problem is that I cannot get media query to work on iPhone 5s iOS 9.3.2 Safari. I have a full screen video on my page what I'd like to change into an image on mobile. I have followed this tutorial to make it happen.
I have specified the viewport like this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have included !important tag in every css entry I need to be changed when being 640px, like this:
#media only screen and (max-device-width: 640px) {
html {
background: url('image.jpg') no-repeat center center fixed !important;
background-color: rgba(0, 0, 0, 0) !important;
}
#video {
display: none !important;
}
body{
background: rgba(0, 0, 0, 0) !important;
/*also tried with background:transparent !important*/
}
}
I decided to use 640px as it is the exact amount of pixels what gets rendered on iPhone 5s according to this source.
I have specified that the background should be transparent as it seems to be the only option to work around the default template style. Meaning when background becomes transparent the background image shows up.
I have read this and this. I have applied the suggested solutions to my problem but none of them worked.
NOTE: I don't have the Mac machine to test this issue via iPhone's web inspector. Making a VM on Windows seems to be not a one hour job.
I have tested my code in Chrome 50.0.2661.102 m (64-bit), Mozilla 46.0.1 and Edge on Windows Phone everything works fine.
I have tried to work with Safari 5.1.7 (the last version released for Windows), but it seems to be very outdated (as expected).
I have also cleared the cache with Ctrl+Shift+R and tried to use Incognito mode.
UPDATE: if I specify the color (for the sake of testing) before the image I will be then able to see the specified color in Safari, but no image:
background: green url('image.jpg') no-repeat center center fixed !important;
Any idea how to solve this?
While waiting for help I've found a workaround just for my case. Thanks to #daemeron's answer.
So instead of implementing separate styleheets for different devices it is just possible to hide the annoying Play button on the background by:
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none
}
This works great on iPhone and Windows 10 mobile. Exactly what I was looking for.
I'm using a iPad with ios 8.02 and iosSafari 8.
.itemgrid-3cols .item:nth-child(3n+1) {
clear: left;
}
I checked in the browser inspector and above style rule is being applied by iosSafari to every 1st, 3rd, 7th, 8th and 9th .item
#media only screen and (max-width: 959px) and (min-width: 768px)
.itemgrid-2cols .item:nth-child(2n+1), .itemgrid-3cols .item:nth-child(2n+1), .itemgrid-4cols .item:nth-child(2n+1), .itemgrid-5cols .item:nth-child(2n+1), .itemgrid-6cols .item:nth-child(2n+1), .itemgrid-7cols .item:nth-child(2n+1)
{
clear: left !important;
}
}
And that style rule is being applied to every .item element. The media query is working properly.
I'm using Telerik AppBuilder to debug the device on Windows, but it you can see this on the device itself.
Here is a link to one of the pages it is occurring. It only occurs on ios 8.02 with iosSafari 8 as far as I can see. I checked on browser stack, the chrome emulator and an older iPad 2 with Safari and the error did not occur.
I also checked caniuse.com and it says that the :nth-child works on iosSafari 8.
Any idea, why this rule is not being applied correctly?
Look at caniuse again.
In the 'known issues' tab, one of the issues says:
iOS 8 Safari has issues with nth-child.
So believe it or not: nth-child doesn't work on iOS 8.
The workaround is of course to use nth-of-type instead - which does work on iOS 8
So (assuming the .item element is a li) your code becomes
.itemgrid-3cols li:nth-of-type(3n+1) {
clear: left;
}
I am developing an android app using JQM and PhoneGap . The app appears good in low end devices but the letters appear extremely small on high end tablets.I have tried modifying the viewport tag after browsing through so many sites.It would be very helpful if someone could give a resolution so that I can concentrate on functionality rather than the layout and resolution.
Use CSS media queries to configure font styles based on device resolution.
Example:
#media screen and (max-width:600px) and (max-height:963px) {
.fontClass {
font-size: 38px;
}
}
#media screen and (max-width:320px) and (max-height:568px) {
.fontClass {
font-size: 28px;
}
}