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;
}
}
Related
I have a Flutter web app that contains a SingleChildScrollView and a number of elements in it. When viewed on my iPhone's Safari, the URL and bottom bars do not hide as I scroll downwards as it would on any other site.
I've tried a number of things including using different elements like ListViews and playing with the physics, but the URL and bottom bars still are not dismissed.
Any ideas how I could configure a web flutter app to help the browser recognize the scroll and dismiss them?
Check out this thread in GitHub: Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari
Credit: jamesblasco
You can add this to the of the index.hml file of any flutter project and try it also there.
<style>
body {
height: 500vh !important; /* Bigger than 100% to allow scroll */
position: static !important; /* Override absolute from flutter */
overflow-y: scroll !important; /* Allows verticall scrolling */
overflow-x: hidden !important;
touch-action: pan-y !important; /* Allows vertical scrolling */
overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
}
/* Centers flutter canvas with a size of the viewport*/
flt-glass-pane {
position: fixed !important; /* Overrides absolute from flutter */
top: 50vh !important;
left: 50vw !important;
max-width: 100vw !important;
max-height: 100vh !important;
transform: translate(-50vw, -50vh) !important;
}
/*
Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and -webkit-overflow-scrolling: touch;
Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
*/
::-webkit-scrollbar {
display: false;
width: 0px;
height: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
</style>
I use Chrome with developer tools docked to the right hand side of the window. Chrome used to show the viewport dimensions at the top right of the window, when you resize the viewport by dragging the central divider. I've always found it useful for testing responsive sites and media queries.
Since a recent update, this has disappeared. Is there a way to switch it back on?
I'm using the latest version (Version 49.0.2623.87) on Mac.
As mentioned it's a bug. For the time being a cheap workaround I've been using is put this into your console:
window.addEventListener('resize', function(event){
console.log(window.innerWidth);
});
Now just watch the console when you resize. It does the trick for basic width checking.
Here's a version that imitates the old resizer:
var b = document.createElement('div');
var bS = b.style;
bS.position = 'fixed';
bS.top = 0;
bS.right = 0;
bS.background = '#fff';
bS.padding = '5px';
bS.zIndex = 100000;
bS.display = 'block';
bS.fontSize = '12px';
bS.fontFamily = 'sans-serif';
b.innerText = window.innerWidth + 'x' + window.innerHeight;
b.addEventListener("click", function(){bS.display = 'none';}, false);
document.body.appendChild(b);
window.addEventListener('resize', function(event){
bS.display = 'block';
b.innerText = window.innerWidth + 'x' + window.innerHeight;
});
I must have too much time on my hands.. This is a css version if you are using media query breakpoints. You can't click it away though, although it might be possible to show it for a # number of seconds whenever the media query fires (using animations)...
body::before {
position: fixed;
top: 0;
right: 0;
z-index: 100000;
box-sizing: border-box;
display: block;
padding: 5px;
font-size: 12px;
font-family: sans-serif;
background: #fefaa5;
border: 1px solid #fff628;
content: 'xs';
}
#media (min-width: 480px) { body::before {content: 'sm';}}
#media (min-width: 768px) { body::before {content: 'md';}}
#media (min-width: 992px) { body::before {content: 'lg';}}
#media (min-width: 1200px) { body::before {content: 'xl';}}
As the title says, I'm wondering how to get this image to span the whole browser window/page instead of having the gray margins.
Im using this theme:
https://raw.githubusercontent.com/olleota/themes/master/paperweight/main.html
And, its in action here:
http://fvcking5hit.tumblr.com/
where you see the gray borders and I just want it to span the whole page wile keeping the fade effect.
OK thank you for the additional comment, this should be all the code you need.
Find this code in your theme (it's showing at around line 226):
#masthead {
margin: 0 10%;
padding: 15% 0;
width: 80%;
}
Change it to:
#masthead {
margin: 0;
padding: 15% 0;
width:100%;
}
There are several references to #masthead in your css, so you will need to target the last reference for this to work (or tidy up the css by removing the old properties).
UPDATE
As you pointed out there is a media query changing the properties of the masthead.
Find this code:
#media (min-width: 1500px){
.theme-name-Paperweight #masthead {
margin: 0 20%;
width: 60%;
padding: 10% 0;
}
}
And change to:
#media (min-width: 1500px) {
.theme-name-Paperweight #masthead {
margin: 0;
width: 100%;
padding: 10% 0;
}
}
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 created a group chat for the iPhone and its almost perfect. It uses the complete viewport by position various elements with:
#message-input {
background: white;
clear: both;
position: absolute;
margin: 0;
width: 100%;
bottom: 0;
right: 0;
padding-right: 0;
}
which makes it look like this:
But when the keyboard pops everything shifts and a grey area appears below:
The height of that grey area is the height of the statusbar and the height of the Debug Console together (without the Debug Console is just the height of the statusbar).
Why does it insert this grey area and how can I avoid it?
#message-input:focus {
margin-bottom: -XXXpx;
}
Where XXX = height of problem grey area. Could be a quick fix for it...