How to make Responsive Images for mobile experiences - javascript

UPDATE
I have Fullscreen background image. This creates problems for mobile browsing for the images are large and hi-res.
Next problem is with things like retina display how does a design/programmer prepare to deal with this issue? I see lot of article about how to switch between images. But then I get overly confused with pixel density vs resolution. The when and where it is needed and the how and why to target them.
Example:
*Fullscreen background image at 1900x1080 resolution & 72dpi. For best optimization, How many images should there be per resolution/pixel density? Furthermore, Given this scenario which library/plugin/symantics would be best on tackling this situation?
Lastly, If i use media queries to target and switch background images will it download all the images? or just when the requirements have been met?
#media (min-device-width : 768px)
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}
#media only screen
and (min-width : 1824px) {
background-image:url('paper1900.png');
}
Thanks stack
//old question didnt wnat to remove it for comment purposes//
So I'm making a responsive website with fullscreen images. The problem I've been running across is that the orginal images are far to large for mobile to download.
Being new to responsive design, I had no idea that this was a problem and discouvered it on my own accord. I read a few article
The best being:
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/
My problem is that: I dont believe <picture>tag is open to the public? I cant find any any more info on this.
Does anyone know if this is allowed? Furthermore, more information/documentation on how to use it correctly.
If picture is non-applicable. Is there any "standard" persay on making images responsive with out bloating mobile bandwidth?

This is the way i did retinafying in my last project:
First set images for desktop in an ordinary css using background-image:
#bg {
background: image-url('wallpaper_desktop.jpg') center top;
background-size: 1024px 768px;
}
Then, I adress mobile phones e.g. iphone:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#bg {
background: image-url('wallpaper_mobile.jpg') center top;
background-size: 320px 480px;
}
}
Then it comes to retina image handling. Use an image, doubled in size (see the "#2x" in filename):
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
#bg {
background: image-url('wallpaper_mobile#2x.jpg') center top;
background-size: 320px 480px; // Original size
}
}
Since there are also iPads and MacBooks with Retina Displays, we should consider to serve them larger and hi res versions in comparison to hi res phones:
#media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
background: image-url('wallpaper_desktop#2x.jpg') center top;
background-size: 1024px 768px;
}
So, usually I'm using 4 versions per image. 2 desktop versions (one with doubled size for retina displays) and 2 mobile versions (also one with doubled size for retina displays)
By the way: There are no additional requests, when using media queries for additional images.

Related

how to assign a css value for mobile and desktop in one line

I have HTML div with width of 190 px that's working normal for desktop but for mobile its not , is there a way to tell if connection is from desktop take this value else take this value ?
this is my code :
document.querySelector('.article').style.width ='190px';
In your css file
// Desktop
.article {
width: 100px;
}
// Mobile
#media only screen and (max-width: 768px) {
.article {
width: 50px;
}
}
This are Media Queries.
In the first lines, we don't have any limitation, but then you override the current value ONLY when the width of the screen is lower than 768px
Just use media Queries which is the best option to make the things responsive .
Otherwise you can have a look at flexbox which is awesome flexbox
Use Media Queries
Using a breakpoint of 576px targets all kinds of mobile devices.
// This is the default size
.article {
width: 100px;
}
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
width: 200px;
}
The other answer targets tablets too. But if you want to target mobile only, use my solution.

How to adjust contents to automatically fit size of the screen?

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?
You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Non responsive Bootstrap via lie #media queries

I have develop a complex responsive webpage layout using Bootstrap 3. The layout nicely shows the arrangement & display as expected on different screen size.
However, is it possible that I can disable the responsive for certain case use so that I set the specific layout display such as xs, then it will shows xs layout no matter what screen it is?
I am thinking could it be done by using JavaScript lying #media queries? Or, it could be easier done by using other method?
in a way a interesting question.
Have a look at this Fiddle and resize the window slowly so you can see what is happening with all the Bootstrap col-XX-XX at the same time.
I have set up groups of cols to show you what would happen if you just used the XS class... as is for what you want to do.
When resizing the window watch how the other classes vary compared to the violet ones which are the XS cols.
You can also if needed roll your own here and set your own breakpoints.
Full size Fiddle here.
It's totally dependent the way you used media query and your need
Use below as per your need
#media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width:2000px){
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width:768px){
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}

Why are #media queries ignored when browser is scaled?

I have been trying to understand why when I scale FF, IE, CHROME neither of them catches my website media queries which is suppose to be responsive. Although when I load it in my iPhone it is just as I designed it to be.
My css is pretty much this way..
CSS
.css goes up here for all devices such as body, header, content, etc
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px)
{
.here goes the css for all devices between 320px and a max of 1024px;
using percentages
}
As I mentioned above, If I load it in my phone (safari) the mobile version loads correctly, on iPhone and Android I have tested but if I scale my browser it doesn't change anything, it is the normal css above the media queries.
This is also in my header..
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Because the comment in css should look like:
/* this */
You code says:
.css goes up here for all devices such as body, header, content, etc
Which looks for a class of css, and tries to do find rules for it.
Next, you use
min-device-width
Which means the width of the device, and not the width of the view port, is being checked against. You probably want:
min-width
So what you want is likely:
/* css goes up here for all devices such as body, header, content, etc */
#media only screen and (min-width: 320px) and (max-width: 1024px)
{
/*here goes the css for all browser width between 320px and a max of 1024px;
using percentages*/
}
I believe the issue is that you are using device-width rather than just width in your media queries. Here is an example that uses max-width rather than device width, and it works without being on a small device:
http://jsfiddle.net/cAZPW/1/
I just have a div changing colors as you resize the width of the screen:
.full-size {
height: 100%;
width:100%;
background-color: red;
}
#media screen and (max-width: 500px){
.full-size {
background-color:green;
}
}

image height based on mobile orientation

I have a problem with a small mobile image gallery. When I change the orientation to portrait the images are too large to be displayed on the screen.
Is it possible with some javascript to make images fit the screen when the orientation changes to portrait? In landscape mode, everything looks fine.
yes, you can use CSS3 Media Queries without using JavaScript.
#media screen and (max-width: 450px) {
img {
width: 30%;
}
}
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Try this:
#media screen and (orientation:portrait) {
//your css code goes here
}
#media screen and (orientation:landscape) {
//your css code goes here
}

Categories

Resources