Is there a simple way to display retina size images on the correct device and the standard on others? i've been search online a some people suggest using a jscript. Basically I want the 32x32 images to load on. Also what size should a retina icon be, 32, 36 width or higher? In comparison to a 16 standard width icon
#media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-resolution:240dpi){
.shopping_icon
{background-image:url(../images/shop_icon.png);-moz-background-size:776px 18px;-o-background-size:776px 18px;-webkit-background-size:776px 18px;background-size:776px 18px;}
would something like this work?
#track .ui-icon{background:url(../simgs/track_icon.png) 50% 50% no-repeat;background-repeat:no-repeat;width:36px !important;height:36px !important;margin:-5px 0 0 -18px;}
#media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (max--moz-device-pixel-ratio: 1.5) {
#track .ui-icon {
background: url(../simgs/track_icon.png);
background-size:36px 36px;
}
}
The device-pixel-ratio should be 2 for retina.
The icon image file should be 36x36 and CSS background-size 18x18 to squeeze it down.
Refer to the last section of this post: http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile
Related
I'm building a responsive website. There's a separate set of CSS to apply for smartphones. To do this, I use the following code
#media all and (min-width: 760px) {
.wrap {
/*css for large screens goes here*/
}
}
#media not all and (min-width: 760px) {
.wrap {
/*css for small screens goes here*/
}
}
My smartphone has a "Screen Resolution: 1080 x 1920." but it still displays the CSS for small screens. I'm surprised this is happening because 1080 > 760 so shouldn't the first block apply? Is screen resolution not actually measured in pixels? If not, then how does one find how many pixels in a screen?
I just found 760px from an example, is there a better way to decide when to switch from full size web page to compact for small screens?
There are two different concepts: the physical pixels of the screen, and the CSS pixels.
Initially, they were in most cases the same, but with so-called “retina” or “hidpi” screens, they are no longer the same. The idea is that a CSS pixel should retain about the same size, and be independent from the actual number of pixels on the screen: you don’t want to have text with CSS font-size 12px to have different sizes on screens with the same dimensions because their pixel density changes.
So the 1080 pixel width of your phone is probably mapped to 360 CSS pixels (x3 pixel ratio).
Instead of this
#media not all and (min-width: 760px) {
use this
#media all and (max-width: 759px) {
to address all viewports below 760 width.
ADDITION, answering the question in the comment "I'm asking what does px mean since it doesn't seem to be the physical pixel count on the screen":
It used to be the pixel count on the screen before retina and similar displays were introduced, which had a multiple amount of device pixels (AKA device pixel ratio, between 1.5 to 3 time as much).
Still, when those came up, the size reference for one "CSS pixel" remained the same (i.e. one CSS pixel would be 2 device pixels on a device with a device pixel ratio of 2), otherwise all websites would be displayed at half the size on these devices. So the pixel unit used in CSS refers to "CSS pixels" not to "device pixels" unless otherwise stated (which is only possible in media queries).
Go to development tools of your browser and select body tag and after that, you will find width and height by this:
due to some CSS issue this may not work properly will be great if you create a simple HTML with the following data to get width and height:
Change your media query with this.
#media only screen and (min-width: 760px) {
// for screens above 760px
.wrap {
color: blue;
}
}
#media only screen and (max-width: 760px) {
// for screens below 760px
.wrap {
color: lightblue;
}
}
If you want to change designing based on screen size then apply only screen with your media query.
Ask for more queries.
Thanks.
I created a slide in my WordPress site and I want the background of the slide to be background-size: cover on desktop and background-size: contain on mobile. I tried to achieve that by using media queries like so:
#media screen and (min-width: 320px) and (max-width: 675px) {
.tp-bgimg {
background-color: rgb(6, 6, 6) !important;
background-size: contain !important;
}
}
But there is a time gap between the load of the slide and until the media query takes place, so i first see the background as cover and after a sec or two it changes to contain, any idea how can i solve this issue?
thx
A better solution for what you need to do is:
Go to Slider Settings:
In 3, Select a slider type: set it to standard slider and load preset Slideshow Full Width.
In 4, Slide Layout: select Full-Width and in Desktop set Layer Grid Size to 1920px x 1080px.
Save settings
In Slide Editor:
Select a background Image with a 1920 x 1080 dimensions
In source settings: set background fit to contain, background position to center top.
With this configuration you should see the image fitting in any screen size.
I am trying to align a bottom bar that is in homepage footer of my website. I want to adjust it so it will look good on common screen resolutions.
I have an issue with these resolutions 1280x960 and 1280x1024
#media only screen and (max-width:1280px) and (max-height:960px){
.tp-caption.black, .black {
margin-top: 496px!important;
}
And then use this code after that
#media only screen and (max-width:1280px) and (min-height:961px){
.tp-caption.black, .black {
margin-top: 464px!important;
}
The issue is it uses the same css, for both resolutions. 1280x960 media query
also applied in 1280x1024 resolution.
It displays the 2nd media query css code in browser, but ignores it and take
the above query.
I want to set the margin for both resolutions, for both heights 960 & 1024.
Can someone please explain me how to fix this?
Tried the same in fiddle, this works fine.
jsfiddle.net/5wx9qqyq/3/
One possible cause can be, missing closing braces for
#media only screen and (max-width:1280px) and (max-height:960px){ }
Please verify.
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}
I noticed that an image embedded into css with Data URI scheme is displayed on Retina screens with "regular" resolution. How to embed and image with resolution required by the Retina display?
I didn't try to embed a double resolution (#2) PNG into CSS, but I suspect that it would be displayed in double size, similar to regular images when size of the image is not defined.
Two images can have the same resolution but different dpi. This is the important part in retina displays, therefore, you need two versions (if you want to save some bandwith for those that doesn't have retina) of you image with different dpi's.
For further information on how to add a rule in css, and some dpi values take a look at: Retina Display Media Query.
EDIT
As pointed out by a comment from #carlos-r-balebona, bandwith will not be saved if embed the image into the CSS, as both versions will always be sent. It will only be saved if you use image URLs as only the proper one will be downloaded.
EDIT WITH EXAMPLE
OK, here's an example:
Suppose you have 2 images (data:image/png;base64,{192_dpi_encoded_image}) and (data:image/png;base64,{96_dpi_encoded_image}).
Now suppose you have a div you want to set the background image to:
<div id="a" style="width: 100px; height:100px;">
</div>
And in your css:
#media only screen
{
#a
{
background:url(data:image/png;base64,{96_dpi_encoded_image});
}
}
#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){
#a
{
background:url(data:image/png;base64,{192_dpi_encoded_image});
}
}
The last #media with conditions will override the background image set before only if there's a retina screen present, thus, setting the large dpi image when needed.
Hope this helps.
You can just set the background size in pixels (the values should be the original dimensions divided by two, if your image has 2x resolution):
.element {
background-image: url(data:image/png;asdkfasdkf);
background-size: 25px 50px;
}