The "X" media queries overwriting "Y" Eg.
/* ----------- iPhone 4 and 4S ----------- */
#media (min-width: 320px) and (max-width: 480px){
header{ height:480px; width: 100%; background-color: blue; }
h1:before {content: "iPhone 4";}
}
/* ----------- iPhone 5 and 5S ----------- */
#media (min-width: 320px) and (max-width: 568px){
header{ height:599px; width: 100%; background-color: blue; }
h1:before {content: "iPhone 5";}
}
I tried adding the device-aspect-ratio to fix the issue, but did not work.
Somebody have the answer?
How avoid this situation on new devices in the future?
The first query asks if the window width (in realtime) is between 320-480. So, if I load your page with a device that has a realtime window width of 400px – the query becomes true, thus the corresponding css will be applied.
However, if using the same device on the second query – that query will be true too because the 400-width-device fits also within the 320-568 span.
I don't know what scenario you want to accomplish but one way is to not try to target individual devices. Example: You could set unique css for the spans ..301-350, 351-400, 401-450... (and so on). That way, a single width fits in one span only. Also, new devices that enter the market will automatically "pick" one of the spans.
I Wanted to add full background image for my ionic app & different image for each device.
Here is my css code.
Media Query for iphone 6
#media(max-width:750px) and (max-height:1334px){
.pane, .view{
background: url(../img/home/Default-667h.png) no-repeat center top fixed;
background-size: 100% auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
media query for iphone 4
#media(max-width:640px) and (max-height:960px){
.pane, .view{
background: url(../img/home/Default#2x~iphone.png) no-repeat center top fixed;
background-size: 100% auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
This is not working in my app.
Whether ionic supports media query?
I'm not sure how/if ionic handles media queries.
But your max-width and max-height do not match the iPhone screen resolutions.
You have to use device independent pixels, not actual pixels.
More info on iPhone media queries here.
Ionic does support media queries (I'm using them myself in my company's app), but I think you're missing a parameter.
Here is an example I am using
This one is used for large screens (iPhone 6)
#media screen and (min-height : 600px) and (max-height : 700px) {
.Landing-formContainer{
padding-top: 35px;
}
}
This one is used for small screens (like iPhone 5s)
#media screen and (min-height : 320px) and (max-height : 500px) {
.Landing .slider-pager {
top: 195px !important;
}
}
I am working on a mobile responsive website which is designed for iPhone 6 Plus and smaller. (iPhone 6 & 5 for now).
When displaying in using "Inspect element" via Chrome browser and setting a device of ones I mentioned above - it works fine.
When displaying it on the real mobiles I only get the smallest width.
#media (max-width: 415px) {
...
}
#media (min-width : 320px) and (max-width : 375px ) {
...
}
#media (min-width : 240px) and (max-width : 320px ) {
...
}
I used both of these in my HTML :
<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
I cant paste all my code here, I have no permission.
What other problems might cause this?
Are there better ways to test mobile responsive websites? Because it seems like testing it on chrome or websites like 'screenfly' aren't that reliableץ
Your issue might be having same min-width and max-width at 320px
So, try this:
#media (min-width : 321px) and (max-width : 375px ) {
...
}
#media (min-width : 240px) and (max-width : 320px ) {
...
}
The issue I'm encountering is text gets cut off in this HTML email on Android (4.0 with Samsung Galaxy).
I've used #media queries to address this, but they adversely affect the iPhone, scaling down the width too much. I'm trying to cancel out the width: 300px !important; just for the iPhone with no luck.
Thanks in advance for any suggestions.
Current #Media:
#media only screen and (-webkit-device-pixel-ratio: .75) {
/* CSS for Low-density screens goes here *
* Ex: HTC Evo, HTC Incredible, Nexus One */
/* Styles */
table[class="table"], td[class="cell"] {
width: 300px !important;
}
}
#media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {
/* CSS for Medium-density screens goes here *
* Ex: Samsung Ace, Kindle Fire, Macbook Pro *
* max-device-width added so you don't target laptops and desktops */
/* Styles */
table[class="table"], td[class="cell"] {
width: 300px !important;
}
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
table[class="table"], td[class="cell"] {
width:auto !important;
}
}
Without Media query Android text gets cut off:
Media query also shrinks the width of td/table to 300px on the iPhone adversely affecting its display
Make sure your CSS definition that you want to be applied is more specific;
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.container table[class="table"], .table td[class="cell"] {
width: auto !important;
}
}
Where .container is a hypothetical container.
As the alternative to "-webkit-min-device-pixel-ratio: 1.5" I suspect you want "-webkit-max-device-pixel-ratio: 1". I don't know what browsers will do with Media Queries that are neither "min-" nor "max-" (such as "-webkit-device-pixel-ratio: 1"); I suspect some browsers will interpret the Media Query to mean equality, but many will just barf and always say the query was false.
Does your browser perchance put error messages about Media Queries it doesn't understand into the "Error Console"?
The case of a handheld device reporting density 1 but a very large width like 800 (the "viewport" width) will sometimes occur. Your current code seems to send no CSS to such devices, which I doubt is what you intend. Having a particular Media Query (such as max-device-width:) on some parts of your CSS but not others is often a hint some edge cases aren't being considered.
try playing with max-width and min-width, to satisfy both androids and iphones. It worked for me.
I want to hide the big play button that appears by default on the <video> element
Is it possible?
I don't have any iOS device handy to test, but perhaps try this:
video::-webkit-media-controls {
display:none !important;
}
It seems Apple has changed the shadow-dom again.
In order to hide the play button control you must use the following CSS:
/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works! */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
A look at the shadow DOM in Safari iOS tells me that what you want (hidding only the big central play button) is:
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
The answer from Ian hides everything including text tracks (closed captions ...)
Newer iOS versions display such play button when the device is in "Low power mode".
In the video source file you can simply change
controls= "false"
For the Safari CSS, which the native browser on ios, you can also try this hacky trick
.custom-video-controls {
z-index: 2147483647;
}
Here's a link to a details discussion on managing/hiding controls on HTML 5 video
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
UPDATE OCTOBER 2021
All answers are outdated for iOS 13, 14, and 15. It appears because iOS low power mode prevents autoplay on all videos in the browser by default (to save power).
The best way to remove the annoying play button is to remove the autoplay tag on any video element and start playing the video when there is any user interaction.
React example below:
<video ref={playerRef} playsInline >
let playVideo = (event) => {
if (playerRef.current) {
playerRef.current.play()
}
}
Sidenote: the play button is hidden in a shadow dom that I am unable to figure out how to hide with external CSS modifications or even JS. If anyone has any ideas on how to hide a shadow dom element then that would be a better solution.
Based on Ian's answer
video::-webkit-media-controls {
opacity: 0;
}
This will hide all controls. Good for background videos that won't autoplay.
Today #2017 in iOS 10 this works:
.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
display: none !important;
}
For webapps.
Works iOS 10.3 iPhone7 & Safari 10.1 on Mac as well. Thx to previous contributors.
I had also the issue that the element does not contain any "control" attribute at all.
'<style type="text/css">'+
'*::-webkit-media-controls-panel {'+
' display: none!important;'+
' -webkit-appearance: none;'+
' }'+
/* Old shadow dom for play button */
'*::--webkit-media-controls-play-button {'+
'display: none!important;'+
'-webkit-appearance: none;'+
'}'+
/* New shadow dom for play button */
/* This one works */
'*::-webkit-media-controls-start-playback-button {'+
'display: none!important;'+
' -webkit-appearance: none;'+
'}'+
+'</style>'
Try this:
video {
&::-webkit-media-controls {
display:none !important;
}
&::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
}
Update:
IOS 13.*
video::slotted::-webkit-media-controls-container{
display:none !important;
visibility: hidden!important;
opacity: 0 !important;
-webkit-appearance: none !important;
}
IOS 14
changed selector to
:host::shadow::-webkit-media-controls-container{/* hide the element */}
helpful resource:
html5rocks shadow dom 201
As of 20 Oct 2022,
My solution was to remove autoplay from the video element and use HTMLMediaElement.play() on page load. The promise returned from play() will catch any issues with playing the video, else the video will play as usual. My implementation in React looks like this:
useEffect(() => {
ref &&
ref.current
.play()
.then(() => {})
.catch((err) => {
// Video couldn't play, low power play button showing.
});
}, []);
This should be a relief from having to deal with the inconsistent Shadow DOM properties.
Resources:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
You can't remove the play button. This video placeholder always appears as the doc says :
iPhone Video PlaceHolder. But maybe you can detect you're on an iphone and display an image with a link to your video instead of the video tag.
<img src="yourposter.png"/>
The video will be launched in a player just as a video tag.
According to this answer, in Google Chrome we can hide the big play button like this:
video::-webkit-media-controls-overlay-play-button {
display: none;
}
That might be useful if you want to hide it on Android as well as on iOS.
video::-webkit-media-controls { display:none !important; }
Didn't work for me on iOS, but
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
Worked perfect!
Yes you can do this! The trick is to "hide" the video controls, by not adding the "controls" attribute to your video tag. Then you let it be dynamically added a few seconds after the video starts to play, by appending the "controls" property to the tag using Javascript. Simply set the value to "controls" and it will dynamically appear in the DOM... as if you had added the controls to your video tag's HTML. Adjust the timer as needed.
<video id="some-video-id" src="some-video-url" poster="some-thumbnail-url" />
Start the Video
<script type="text/javascript">
var oVideoTag = document.getElementById('some-video-id');
var oLink = document.getElementById('startVideoLink');
if (oLink && oVideoTag) {
oLink.addEventListener('click',function(e) {
oVideoTag.play();
setTimeout(function() {
oVideoTag.controls = 'controls';
},2500);
},false);
}
</script>