#media only screen and (min-width:300px) and (max-width:667px) and (orientation: portrait) {Class goes here}
#media only screen and (min-width:667px) and (max-width:768px) and (orientation: landscape) {class goes here}
portrait view working good but landscape not showing any change even media query can't see in inspect code also.
I actually tested the ranges:
#media only screen and (min-width:300px) and (max-width:667px) {
div {
background-color: red;
}
}
#media only screen and (min-width:667px) and (max-width:768px) {
div {
background-color: green;
}
}
They do work. But when I add the orientation, it fails to work on the portrait.
#media only screen and (min-width:300px) and (max-width:667px) and (orientation: portrait) {
div {
background-color: red;
}
}
#media only screen and (min-width:667px) and (max-width:768px) and (orientation: landscape) {
div {
background-color: green;
}
}
Try to remove one of the orientation on the media queries. It could solve the problem. If you still want to leave the orientation condition, test it on a real device instead of a simulating tool.
how can I solve this problem in the main project because I used this code in all files but before a month I didn't have any issue but after sometime vocode shows me this error
here is the image that shows the error of ) expected scss(css-rparentexpected) and this error is throwing error on vscode problems tab in terminal
this is the second image 👇👇👇
this is the pic in that I am facing issues on working our main project and vs code throwing error but there is no issue when I compile it?
// ----Media query mixin-----------//
#mixin min-mq($min-screen-size) {
#media (min-width: $min-screen-size + "px") {
#content;
}
}
#mixin max-mq($max-screen-size) {
#media (max-width: $max-screen-size +"px") {
#content;
}
}
// ----------------------------For Orientation-----------------------//
#mixin landscape-orientation($max-screen-size, $orientation) {
#media (max-width: $max-screen-size +"px") and (orientation: $orientation) {
#content;
}
}
#mixin btw-mq($min-screen-size, $max-screen-size, $pixel-ratio, $orientation) {
#media only screen and (min-width: $min-screen-size +"px") and (max-width: $max-screen-size +"px") and (-webkit-min-device-pixel-ratio: $pixel-ratio) and (orientation: $orientation) {
#content;
}
}
#mixin btw-sz($min-screen-size, $max-screen-size) {
#media only screen and (min-width: $min-screen-size +"px") and (max-width: $max-screen-size +"px") {
#content;
}
}
I'd like to know what happens when I lay my code structure as shown below. Does an iPad user load "stripes.png" and then "stripes-X2.png" this way?
div.stripes {
background: url("stripes.png");
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div.stripes {
background: url("stripes-X2.png");
}
}
If that's the case, would this be a better alternative to make sure each device only loads appropriate version of the image for itself?
#media (-webkit-min-device-pixel-ratio: 1), (max-resolution: 191dpi) {
div.stripes {
background: url("stripes.png");
}
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div.stripes {
background: url("stripes-X2.png");
}
}
let me say as first I am a CSS noob. I can freely accept any blaming
#media (max-width: 735px) {... }
#media (min-width: 735px) {... }
#media (width: 320px) {... }
#media (width: 360px) {... }
#media (width: 375px) {... }
#media (width: 414px) {... }
I have these things for able to make it sensitive.
I wanted to use max-width but failed not sure why but browser always choose another max-width expression and executes it so I just collected the mobile phone's width and made this.
And also I want to send same content to who has 360px and 320px is there any "or" expression may be I can minify it.
If I got it correct from your question, you can add the following media query.
#media (min-width: 320px) and (max-width: 360px) {
html { color: blue; }
}
I recommended using a different approach, either mobile first or desktop first using media queries. In that way you can simply address the correct layout to a lot of people without writing exceptions.
Mobile first
html { color: purple; }
#media (min-width: 600px) {
html { color: black; }
}
/* And go up the road */
Desktop first
html { color: purple; }
#media (max-width: 600px) {
html { color: black; }
}
/* And go down the road */
I am new to phonegap and facing a problem, I am making a phonegap app which will run on multiple platform devices of different screen size and different screen resolution so I have to load images of different resolution depending on screen resolution.
this can be achieved in android by simply putting your images of different resolution in hdpi, mdpi and ldpi folder and it(android) fetches images automatically depending on devices screen resolution. But how to do this in phonegap.
I have seen lot of articles on responsive web design they all say about positioning the elements on web page but non of them has told about how to place images on the basis of screen resolutions.
thanks i advance.
edited question
i have used following code for html
<div id="header" data-role="header" data-position="fixed">
<img alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left" />
<img alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right" /><h1></h1>
</div>
now I have images inside assets/www/pictures folder. this folder consists of 2 images of same resolution app_logo.png and company_logo.png and 2 images of higher resolution app_logo_big.png and company_logo_big.png now through media queries i will know the screen size and apply the styles but as far as i know i cannot change img src from css. So now how will i use these images of different resolution
Then Dynamically Change Image through jquery:
HTML:
<div id="header" data-role="header" data-position="fixed">
<img id="app-icon" src="pictures/app_logo.png" display="inline" />
</div>
Javascript:
$(document).ready(function () {
if(window.devicePixelRatio == 0.75) {
$("#app-icon").attr('src', '/images/lpdi/app-icon.png');
}
else if(window.devicePixelRatio == 1) {
$("#app-icon").attr('src', '/images/mdi/app-icon.png');
}
else if(window.devicePixelRatio == 1.5) {
$("#app-icon").attr('src', '/images/hpdi/app-icon.png');
}
else if(window.devicePixelRatio == 2) {
$("#app-icon").attr('src', '/images/xpdi/app-icon.png');
}
}
Through CSS: Use Media Queries for Different Resolution :
HTML:
<div id="header" data-role="header" data-position="fixed">
<span id="app-icon"></div>
<span id="brand-icon"></div>
</div>
CSS:
/* Low density (120), mdpi */
#media screen and (-webkit-device-pixel-ratio: 0.75) {
#app-icon { background-image:url(pictures/ldpi/app-icon.png); }
#brand-icon { background-image:url(pictures/ldpi/brand-icon.png); }
}
/* Medium density (160), mdpi */
#media screen and (-webkit-device-pixel-ratio: 1) {
#app-icon { background-image:url(pictures/mpi/app-icon.png); }
#brand-icon { background-image:url(pictures/mdpi/brand-icon.png); }
}
/* High density (240), hdpi */
#media screen and (-webkit-device-pixel-ratio: 1.5) {
#app-icon { background-image:url(pictures/hdpi/app-icon.png); }
#brand-icon { background-image:url(pictures/hdpi/brand-icon.png); }
}
/* Extra high density (320), xhdpi */
#media screen and (-webkit-device-pixel-ratio: 2) {
#app-icon { background-image:url(pictures/xdpi/app-icon.png); }
#brand-icon { background-image:url(pictures/xdpi/brand-icon.png); }
}
If you want to filter through,
ORIENTATION - and (orientation: landscape)
Device WIDTH and (min-device-width : 480px) and (max-device-width : 854px)
Example:
#media screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width : 640px) and (max-device-width : 960px) and (orientation: landscape) {
/* Your style here */
}
You can also do this using a handlebars helper, which less code intensive and in my opinion the recommended method:
if (screen.width <= 480) {
imgFolder = 'img/low/';
}
else {
imgFolder = 'img/high/';
}
Handlebars.registerHelper('imgFolder', function () {
return imgFolder
});
while img/low/ and img/high contain images in different resolutions with the same name.
Then in your template:
<img src="{{imgFolder}}yourImage.png" />
Of course, you have to set the screen size values according to the devices your app targets.
Appendix:
If you do not have 1:1 pixel mapping in cordova browser (which is NOT recommended - your images will have a blurry/unsharp look) screen.width will differ from browsers width (window.innerWidth) and you have to use $(window).width() or window.innerWidth. You might be able to fix a wrong mapping using media queries.
Creating support for more sizes is a problem, but you can fix it with #media queries in CSS. Check this example code:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
With this code you can add support for all devices. Check this link for getting more code for more browsers
Functions which you can use:
Width and height: (min-device-width : 768px) and (max-device-width : 1024px)
Orientation: (orientation: landscape) or (orientation: portrait)
Device pixel ratio: (-webkit-device-pixel-ratio: 1.5)
EDIT:
HTML:
<div id="header" data-role="header" data-position="fixed">
<span id="app_icon" alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left"></span>
<span id="brand_icon" alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right"></span><h1></h1>
</div>
Change img into span and add IDs.
CSS:
#media screen and (-webkit-device-pixel-ratio: 0.75) {
#app_icon {
width: 100px; /* Example size */
height: 100px; /* Example size */
background: url(pictures/app_logo_small.png);
}
}
#media screen and (-webkit-device-pixel-ratio: 1) {
#app_icon {
width: 150px; /* Example size */
height: 150px; /* Example size */
background: url(pictures/app_logo_medium.png);
}
}
#media screen and (-webkit-device-pixel-ratio: 1.5) {
#app_icon {
width: 200px; /* Example size */
height: 200px; /* Example size */
background: url(pictures/app_logo_large.png);
}
}
#media screen and (-webkit-device-pixel-ratio: 2) {
#app_icon {
width: 300px; /* Example size */
height: 300px; /* Example size */
background: url(pictures/app_logo_xlarge.png);
}
}
With this example you can change your code and fix it. Hope this help!
I have found I've had to start adding support for pixel ratios of 0.5, 1, 1.3, 1.5, 2 and 3 using these media queries.
Note I am using -webkit-min-device-pixel-ratio rather than -webkit-device-pixel-ratio.
I had found that on one of my test devices (Galaxy Tab 3 - 8") the pixel ratio was 1.3 and wasn't picking up any of the specific styles I had set in my phonegap app.
#media screen and (-webkit-min-device-pixel-ratio: 0.5) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 1) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
}
#media screen and (-webkit-min-device-pixel-ratio: 1.3) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart#2x.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart#2x.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 2) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart#2x.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 3) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart#3x.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
I think you have to divide the reported screen dimensions by the screen density to get the media query width and height dimensions.