I just did a speed test on desktop & mobile on gtmetrix and have the error code: Serve Scaled Images - But only on the mobile speed test. The error reads as follows:
**.jpg is resized in HTML or CSS from 1200x431 to 318x114. Serving a scaled image could save 520.9KiB (92% reduction).
Is there a specific code I can put with the image to have it one size when on mobile and leave the desktop one at the original/other size. Or is there another way such as serve a particular image for mobile (same image smaller size) then another image for serving desktops?
Thanks.
You can do like this and define different background url on different media queries for same class.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
I think you might want something like this:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if(isMobile.any()){
// Mobile!
} else {
// Not mobile
}
You can then do something like: (untested below(needs tweaking))
if(isMobile.any()){
img { height:140%;width:140%
You can alter the size of images through the style tag. img { should alter all <img srctags on the page as I've done it before. And a revision of the above code should alter it only for mobile or desktop computers.
Related
#media only screen and (min-width: 768px) and (max-width:1199px) {}
I want to put Media query only for safari browser for given Size of device.
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 768px) and (max-width:1199px) {
::i-block-chrome,.allsearch-in select{display:none;}
}
still not Working...
CSS Media Queries for iPads & iPhones
iPad in portrait & landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Browser Specific Hacks
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
ThankYou
Add Class for safari browser to determine browser name by javascript
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') == -1) {
alert("2"); // Safari
//add class to body tag
}
}
then use this class in css.
I am using responsive design for my site but the css media queries are not working for Windows Phone. I found a solution here http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ but still is not working for me.
I am using on my header file on html this:
<meta name="viewport" content="width=device-width, initial-scale=1">
then I add on the head this js:
<script type="text/javascript">
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("#-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
before any other script and last on my css page I have:
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
#media only screen and (max-width: 599px) {
#-ms-viewport{
width:320px;
}
}
But still I cannot make it work. Does anyone have an idea what could be the problem?
Thanks in advance.
Try this media queries
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
I've got a block of html, let's call it a tile. When the screen is wide we lay down tiles horizontally in rows. But when the screen is less than two tiles wide we lay them down the page.
Inside the tiles are an image and some text. When the tiles are going across the page the image should show above the text. But when there is only one tile in a row the image should show to the left of the text.
Perhaps you're still with me. I'm trying to work out how to use the same html for both layouts and apply the left/top positioning of the image purely with css. The tile html looks like this:
<li class="car-item">
<img src="{{car_image}}" class="img-rounded">
<h3>{{name}}</h3>
<ul>
<li class="ico-body">{{body}}</li>
<li class="ico-petrol">{{cylinder}}</li>
<li class="ico-transmission">{{transmission}}</li>
</ul>
</li>
The sass/css has gone through a number of variations. I've been trying to use visible-phone class but my attempts always wind up needing to output two versions of the html, one with "visible-phone" class and another "hidden-phone" class. Is this really necessary?
Is it not possible to declare a default css class (for desktop) and an alternate which automatically applies to phone?
.visible-phone
height: none
margin-right: 10px
img
float: left
(#media?)
Here are the media queries of standard devices (from CSS-Tricks.com):
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.
**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
(and from Creating a mobile web page with different css style)
CSS newby here...
I'm looking at a responsive framework and imagining how I would accomplish different tasks.
Based on the size of the screen, they have classes added to the body tag such as:
.PhoneVisible, .DesktopVisible, etc...
They also have classes to make links into buttons :
.btn, small-button, med-button, large-button
I'm puzzled on how you would go about changing your CSS. I.E. something like:
<a href="#" class="MyButtonOptions">XXXX</>
.PhoneVisible .MyButtonOptions { btn small-button }
.TabletVisible .MyButtonOptions { btn med-button }
.DesktopVisible .MyButtonOptions { btn large-button }
Do you have to set the varying options individually?
i.e. .PhoneVisible .MyButtonOptions { height:30px; } ?
All advice appreciated!
CSS Media Queries are definetly the way to go.
You can easily separate your CSS based upon the browser size, pixel density, etc.
Here's a list of examples from CSS-Tricks.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* 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 */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Take a look at this https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.
Another way is to attach the resize event some piece of "switch code".
Something like this: http://jsfiddle.net/s5dvb/
HTML
<div id="body" class="limit400">
<h1>Hey :D</h1>
</div>
CSS
.limit400 h1 { font-size:10px; }
.limit1200 h1 { font-size:50px; }
JS
$(window).on('resize', function() {
if($(window).height() > 400) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}else{
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
About the frameworks, try http://purecss.io/ or http://getbootstrap.com/
Hope it helps.
Like Nej Kutcharian posted, you can use the above approach and just to relate it back to the class scenario. Rather than switching class you use the same class and change the styling it applies depending on the size of the screen.
As shown below, any element with the class "adjust-me-based-on-size" will have a margin-left and margin-right with differing values depending on the media size, so default is 15% but if the screen is between 800 and 1200 (px) it will have 10% instead and less 800px will have no right margin and a left margin of 5%.
.adjust-me-based-on-size{
margin-left: 15%;
margin-right: 15%;
}
#media only screen and (min-width: 800) and (max-width: 1200) {
.adjust-me-based-on-size {
margin-left: 10%;
margin-right: 10%;
}
}
#media only screen and (max-width: 800px) {
.adjust-me-based-on-size {
margin-left: 5%;
margin-right: 0%;
}
}
I have different views on portrait and landscape
/* portrait ----------- */
#media only screen
and (max-width : 320px) {
body{
padding:20px;
}
}
/* landscape----------- */
#media only screen
and (min-width : 321px) {
body
{
padding:60px;
}
}
/* webpage----------- */
body
{
padding:0px;
}
however, landscape css effects on webpage view. how do I spilt webpage up?
I tried to make another media query on webpage, but it didnt work.
also I tried (min-device-width : 321px) for devices only, but it doesnt work
As explained in this article, the media query spec includes orientation detection. It should look something like this:
#media screen and (orientation:landscape) and (min-width:321px) {
foo {
padding:60px;
}
}
#media screen and (orientation:portrait) and (max-width:320px) {
foo {
padding:20px;
}
}
And so on.