Testing some media queries in various browsers on Android and noticed Opera Mini 6.5 on my Samsung Galaxy S does not seem to apply stlyes inside the following code.
#media screen and (min-width: 320px){
It seems if I lower the value to 282, Opera Mini will excute the styles inside the media query.
#media screen and (min-width: 282px){
I'm wondering if anyone else has run into issues with Opera Mini not handling media queries correctly on Android phones. All of the other browsers I've tested on Android seemed to work fine with min-width:320px as well as my tests of Opera Mini on iOS devices.
I've set up a few test pages to check out with variations on the viewport meta tag.
h5bp Mobile 2 meta tags - goo.gl/XfEVx
h5bp Mobile 2 meta tags with maximum-scale set to 1.0 - goo.gl/mgKJA
h5bp Mobile 3 meta tags - goo.gl/uxPsa
h5bp Mobile 2 meta tags with maximum-scale set to 1.0 and Opera CSS viewport tag - goo.gl/McNhj
Viewport meta tag only -goo.gl/QMnmp
I noticed this issue on my Samsung Galaxy S Epic 4G in portrait orientation on Opera Mini 6.5.
According to Opera docs, Opera Mini 6.5 supports Media Queries and using Presto 2.8. The support of media queries in Presto 2.8 seems to be complete.
Did you try to play with the initial scale or device-width
<meta name="viewport" content="width=device-width"/>
or
initial-scale=1.0
I searched our Opera bug reports but I didn't see anything related to this. Do you have a link to a Web page so we can test further.
Do you see the same problem in all versions of Opera and IE9? Do you use Modernizr and Respond.js? I had a very similar problem, Respond.js was the source.
I solved it by bundling Modernizr and Respond.js into single file via http://www.initializr.com/.
Maybe this helps.
Related
I am working on one web application and learning Vue.js in parallel.
My site working correctly on Chrome, Firefox and Opera, but in Safari layout is moving around.
Myb .browserslistrc
> 1%
last 3 year
not dead
not ie 11
npx browserslist displays the correct list of browsers, including Safari, but it doesn't work fine.
What could be the problem?
I tried changing .browserslistrc
adding -webkit-box options to css
Generally understood.
The problem was not with Safari support per se, but with the non-working popup window setting
display: flex.
Changed to
display: table
and it worked
I'm trying to find a quality selector for Videojs 7.5 that automatically lists the available bandwidth versions in a HLS and MPEG-DASH manifest. A bit like YouTube where you can select a quality, but without having to manually place resolutions in the embedding code.
I tried several options listed in https://videojs.com/plugins/ but they all seem to be made for much older versions.
Anybody an idea?
I found it. https://www.npmjs.com/package/videojs-http-source-selector does the trick.
It fills in all resolutions retrieved from the manifest and it works with videojs 7.5.0
You need to install videojs-contrib-quality-levels.js as well.
With other quality level plugins, you have to fill in all resolutions yourself (dynamic), which I liked to avoid.
Use these libs. It automatically picks up the qualities. Works smoothly with dash or hls link.
<!-- Brightcove quality picker -->
<link href="//players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.css" rel="stylesheet">
<script src="//players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.min.js"></script>
Demo player here: https://sahilkashyap64.github.io/hls/index5.html
I'm embedding PDF.js using
<iframe src="/pathto/viewer.html?file=/pathto/example.pdf" class="pdf"></iframe>
The css I'm adding to it is only changing the width and height. I'm using Windows 7 64-bit and the latest Safari as of a couple of days ago from the apple site: 5.1.7.
Any ideas any one?
We are having an issue where smart banners appear in Safari on iOS6, but when testing in Safari on iOS7 with non 5s devices the banner briefly appears (sort of a placeholder without content) and then disappears. We have tested other sites other than ours and it seams to be consistent behavior. dropbox.com cnn.com usatoday.com all have smart banners visible with Safari iOS6, but that are disappearing when reached from Safari iOS7 from iPhone4, iPhone4s, iOS Simulator, iPhone5.
Is anyone else seeing this behavior?
I was having the same behaviour on iOS8.
It turns out that the ID I grabbed from the app store url was prefixed with "id". Once I removed that prefix it started working as expected.
In this example URL
http://itunes.apple.com/ca/app/ditchtv/id1042361181?mt=8, the meta tag should be:
<meta name="apple-itunes-app" content="app-id=1042361181">
I hope this helps!
I saw this same problem, but only for apps that have not been built with the iOS7 SDK. My older apps that have been compiled with the iOS <= 6 SDK will show an app banner on phones running iOS <= 6, but only apps compiled with iOS SDK == 7 will show on a phone running iOS 7.
Can anyone let me know what is the difference between testing a Safari 5 in Windows vs Mac? Are there significant changes in how the page is rendered between windows vs Mac for the same version of Safari? If I test a page in Windows Safari, can I expect the page works exactly same in Mac Safari as long as Safari version matches?
Thanks
Not significant but there are subtle differences, it's difficult to list them as I think it will depend on the html/css and version.
I have noticed small differences on one of my sites in the past, but as I can't remember the details I've found another example that someone has documented.
Anyway, I've satisfied myself that the differences I've seen are too subtle to fully test every release on each machine (the budget is small!), only on major changes.
One small difference for instance is that the iOS version won't allow you autoplay of any media (audio or video) in its html5 player whilst the Windows and Mac versions do.
i notice few thing in windows safari and mac safari,when we choose an image in windows safari then its not display as preview but in mac safari its display as preview before upload.so File reader api is not supporting blog type.