So after some Googling, and trial and error, I've found out that (as far as media queries are concerned) the landscape width of the Nexus 5 is 598px. I am just not sure why.
I believe the Nexus 5 resolution is 1080x1920 with a 3x pixel density. Which would make me think that:
#media all and (min-width: 640px) and (orientation: landscape)
Would target it, but I have to go down to
#media all and (min-width: 595px) and (orientation: landscape)
My question is why?
Related
I am using VueJS for developing a website. The website uses an image as a global background, which I set up in the styling section of my App.vue like the following:
<style lang="scss">
...
// Mobile version
#media only screen and (max-width: 600px) {
#app {
background: url("assets/bg-mobile.png") no-repeat fixed;
background-size: 100%;
}
}
// Desktop version
#media only screen and (min-width: 600px) {
#app {
background: url("assets/bg-desktop.png") no-repeat center center
fixed;
background-size: 100%;
padding: 0;
}
}
...
</style>
This works well, but in production, the background loads very slowly, "stripe by stripe", especially for the desktop version. It is 2500 by 1667 px, for a size of 5.41MB. It sounds a lot but I would like the website background not to look pixellated.
Is there any thing I can do? Playing on the color resolution? At least, can I prevent the page from rendering while the background isn't ready?
I am using an Amazon S3 bucket to deploy my app.
5.14MB is quite a large resource that the user has to download. You can probably prevent the page from loading before the background is ready, but that will really hurt SEO (not sure if that matters to you) and for users with a slow connection the page will take a very long time to load. So I wouldn't use this approach.
You should try and optimise the image as much as you can to reduce it's size. Try to make it no bigger than it needs to be.
If it's a jpeg then you could look into using progressive jpeg:
https://www.thewebmaster.com/dev/2016/feb/10/how-progressive-jpegs-can-speed-up-your-website/
Another option might be to show a default background (just a colour similar to the image), and display the image once it's fully loaded. This way the page load is not blocked by the image. And then the imaged will be cached by the browser, so on future page requests it will be much faster.
This is just my take on it though.
I want to display one large image for regular screens and ipads and then drop down to a smaller image, an actual different image not scaled, when in mobile screen. How can I achieve this with just css and html and bootstrap (no JS). Is there a way? Thanks
There's a kinda hacky method involving background-image and media queries:
http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/
(See the full article for the additional details needed for a production-ready battle-tested version.)
It boils down to:
#image {
background-image: url(your-large-image.jpg);
}
#media only screen and (max-width: 320px) { // change/add media queries as necessary
#image {
background-image: url(your-small-image.jpg);
}
}
<div id="image"></div>
There's also the <picture> element and the srcset attribute, but neither of those are fully standardized or widely supported at this time.
You might be best served by dropping the "no JavaScript" requirement and using something like Interchange.
I've been in the midst of creating a website, and I want to start using media queries. I want to target desktops, tablets, and smartphones. I'm just learning media queries, and wanted guidence in whether to use min-width or max-width. I've noticed that HTML5Boilerplate uses this:
#media only screen and (min-width: 480px) { }
#media only screen and (min-width: 768px) { }
But I've found it easier to use max-width, like so:
#media only screen and (max-width: 481px) { }
#media only screen and (max-width: 769px) { }
Is there a real benefit to doing it with min-width, as opposed to max-width? For some reason I'm just having a hard time getting my head around how to best do it using min-width. Max-width seems to make more sense to me when starting this off. Thanks!
I don't see any benefit in using min-width vs max-width. If you know how long will be the content then just use the width according to that, that is, you don't need min or max width. However, if you're querying it and you don't know how long will be the content, just try to predict it. I would use min-width when I know that there is a possibility for the content being shorter than what I planned so that the layout would not be disrupted. On the other hand, when you know that the content will be a long one, just use max-width.
min-width and max width use for different resolution devices. supposed you don't define any particular device width how was the show the layout....
To be as succinct with styles as possible, I'd rather not use a media query stylesheet that is included if my page is viewed with a double-pixel-density device such as the iPhone 4.
That being said, would it be ok if I just did something like this?
.icon-1 {
background-image: url('my-image-64px.png'); // This image is 64 x 64
background-repeat: no-repeat;
background-position: center center;
background-size: 32px 32px;
}
Would this work across the board without any drawbacks? Or should I do some sort of a media query for devices with a certain pixel density?
Yes it would. The only drawback is downloading an image that is much larger than it needs to be on non-retina displays. I would recommend that you have non retina images for everything in the main stylesheet (with background size set for all images), and include a retina stylesheet as necessary that overrides all image urls with links to retina sized images.
It's a bit more work, but people on slow edge cellular connections will thank you.
Oh, and your way will also downsample your image for you, which may or not be ok. If you have 1px wide lines (for example) in the image, it may not downsize in a way that you find pleasing. But for most types of images, it will probably be acceptable.
To answer your "media query for devices with certain pixel density", the answer is yes:
media='only screen and (-webkit-min-device-pixel-ratio: 2)
In addition to dmackerman's post, to include a media query for non-webkit browser supporting higher densities, one could write:
#media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
or
#media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
}
which are both producing the same outcome.
I have a box in one of my websites that has a these property:
-moz-box-shadow:inset 0 0 50px #ecf4de;
-webkit-box-shadow:inset 0 0 50px #ecf4de;
box-shadow:inset 0 0 50px #ecf4de;
This gives the box a nice gradient towards the center. However, Safari does not support the "inset" property and IE doesn't support box-shadow at all. I can't use an image for this because the height of this box changes for each situation.
I don't want to use 3 images, (one for the top, a repeating one for the middle and one for the bottom), as this can get very messy code.
So what I'm asking is if there is any way to produce the box shadow in all browsers.
EDIT: Anybody know of some javascript snippet that could possibly do this? Just wondering...
The latest Webkit build (and probably many before) has support for inset. It will probably get to Safari for the next release.
However, you won't be able to do it on all browsers without the three images trick. Internet Explorer's not going to collaborate with you otherwise.
That being said, I don't think your goal should be to get identical results in all browsers. I think you should get decent results in all browsers, but it's normal that web pages in Safari or Firefox look better than in Internet Explorer 7. Besides, only web geeks compare web page rendering across different browsers.
Agreed; to be honest, I've no qualms about leaving my pages looking blander and blockier on Internet Explorer than superior browsers. The content is still readable, accessible, and navigable: but screw getting it pixel perfect between browsers. If anything, it'll just give Microsoft all the more incentive to improve their browser's support for CSS3.
Personally, I think the inset flag is one of the most awesome features being promised by box-shadows... aside from giving elements a depressed, "cut-out" effect, inset shadows can also be used to create glowing edges and angled shading, an effect that can't be easily achieved using straight background gradients (especially with rounded edges). Being able to inset shadows opens up a whole wealth of opportunities for web design.
Knowing that Safari didn't support it had me worrying it might be dropped from the spec at some point: God knows there's no reason to drop something so useful. >_>
inset Safari 5.0 support
http://www.css3.info/preview/box-shadow/
You may have more luck with the 'Overlay Method', the first of Jordon Dobsons's techniques here, which uses radial gradients.
But it does still require a height and width on the image (especially in Chrome).
/* Overlay Method */
figure.overlay::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: 2;
pointer-events: none; /* "all" disables mouse access to image */
/* Mozilla Setting */
background-image: -moz-radial-gradient(
center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px
);
/* Webkit Setting */
background-image: -webkit-gradient(
radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))
);
}