My site has a fluid design between 800px and 1280px. (I appreciate many display resolutions exceed this now).
In 10 inch tablets the site displays best with a viewport width set at 800px allowing the tablet to scale this to its window size. This way fonts are a decent size and images are not much affected by blurring given the small display.
Desktop browsers ignore the viewport meta tag and display between 800px and 1280px, and a background beyond this.
IE10 on Windows 8 however implements the viewport tag on both desktops and tablets and therefore implements the 800px layout on desktops. This results in unacceptably blurred images and giant text on larger displays.
Using CSS the best I approach I have been able to find is something like this (assuming the Windows Surface has a width of 1366px):
#media screen and (max-width: 1023px) {
#-ms-viewport { width: 800px; }
}
#media screen and (min-width: 1024px) and (max-width: 1366px) {
#-ms-viewport { width: 1024px; }
}
#media screen and (min-width: 1367px) {
#-ms-viewport { width: device-width; }
}
This still means desktops will have zoomed images and text unless the display exceeds 1366px resolution. Using max-device-width in the media query does not seem to offer much given that the Surface has a similar native resolution to many desktops.
Alternatively, I could detect the tablet and set the viewport width with Javascript or detect it with PHP and deliver a different stylesheet.
No doubt there is a better way to do this, preferably with CSS?
Thanks, appreciate any suggestions.
Related
I have a webpage with different images of different proportions. I want to display in the best format for different devices: desktop, tablet, smartphone, etc.
Is it best to use CSS3 #media (mx-width: ** px ) or jQuery $( window ).resize(function() and $( document ).ready(function() { with a change in the size of the image?
The last step works very well and does not require to set a lot of different media sizes as in the case of CSS3, but if Javascript is disabled it will not work.
Basically, I want the images to be responsive, but not with re-scaling of the screen of the device, which is what I get with the Javascript code, but offering the full width of the container div when the page and images are displayed in a smartphone. I think that the approach would involve PHP code to get the Client data ( $_SERVER['USER_AGENT'] ) because don't want images to be too big to go outside the screen, and when using a smartphone I don't want the images to be too small to be seen, and here I have the problem of screen resolutio: the pixels of the image can be 1200 px, but it is shown very small because of screen pixel density or resolution.
The best approach these days is using a technique called "responsive image sizes" along with good old CSS to handle image scaling on devices with similar screen sizes.
Using 'resize' event to manipulate the DOM with jQuery is a staging way to bad performance and bad user experience.
The core idea is to load smaller images on smaller screens and down-scale them in browser if image is bigger than required, using:
img {
display: block;
/* You should never upscale raster images in browser */
max-width: 100%;
height: auto;
}
Here is a good article, that covers the concept in details: Responsive Images in Practice
I would recommend checking out lazysizes, it implements lazy-loading as a bonus.
This is how you use it in your markup:
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
I've come across this website: http://ethanmarcotte.com/ and when you scale the page down to tablet size, the logo which is Ethan Marcotte is in perfect ratio when the screen size gets bigger and smaller.
How would I go about replicating the same idea, having an image that is the same perspective no matter what screen resolution or what size the browser window is that it's being rendered on?
img {
max-width: 100%
}
If you want that this only happens at smaller resolutions you can add this and style the image between this.
#media screen and (min-width: 768px) {
}
I plan to design a web app with Phonegap. As I need to deal with different screen sizes, I will have to work with responsive design and CSS3 media queries.
I have a 1080x720 resolution android phone, and I want to start with this (large) resolution, and say the css is base.css. And for smaller screens, I will add something like small.css to overwrite base.css (places where needed).
Assume the css would be complicated, will it incur more workload for small screen phones (whose capability tends to be weaker than large ones)? Is it better to start with small.css as base.css, and overwrite it with big.css on large phones? Or it doesn't matter in web app scenario (as css file size is not a big issue)?
Any design considerations and hints?
I can only agree with #Lisbeth. Start with the bigger design and keep it all in one CSS file. If your jumping between designing wider screens and smaller, you'll easily get confused and the end result will suffer. Make a complete design for big screens and then move on to next size down. This is a mockup that I'm using for most my projects. Just add it to the bottom of your CSS file. A good article that descibes the details
// Code for "regular" computer screens
/*------------------------------------*\
$SMALL COMPUTER SCREENS
\*------------------------------------*/
#media all and (max-width: 1034px) {
}
/*------------------------------------*\
$IPAD AND TABLET
\*------------------------------------*/
#media only screen and (max-width: 767px) {
}
/*------------------------------------*\
$IPHONE 4S LANDSCAPE
\*------------------------------------*/
#media only screen and (max-width : 480px) {
}
/*------------------------------------*\
$IHPONE 4S
\*------------------------------------*/
#media only screen and (max-width : 320px) {
}
I usually start with a 1000px width and complete the design first.
Then I use media queries for 800px,600px and <400px.
While designing the page decide which elements are to be shrink and which elements to be float-removed. Then apply the appropriate changes in media queries. Instead of using two css, use one (This saves your number of requests). Make small tweaks to fit your small screen devices.
http://css-tricks.com/ have an excellent responsive design. Just note how they are changing the elements.
Or a simple answer, start from bigger width to a lower one !
I am creating a website which has the following code in it.
<style>
.browser_logo{
width:100%;
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
The image is about 1000px width which is extreme but it needs to be. The problem is that it is only 52px width in Safari. It is correctly displaying in Chrome, Firefox, Opera and even in IE. I have been looking the entire evening for Safari hacks but everything I find also changes the output in the Chrome browser. When I remove the width 100% or basically the style part then it shows the entire image as it should in safari. But then it will no longer be responsive. Any help would be greatly appreciated.
I have added the following to the style part above. Which makes it work but it is an ugly hack so I still would like to know how to do it properly.
This is the new code. I have used the screensizes from http://www.websitedimensions.com/
<style>
#media screen and (min-width:310px) {.browser_logo{min-width:310px;}}
#media screen and (min-width:468px) {.browser_logo{min-width:468px;}}
#media screen and (min-width:750px) {.browser_logo{min-width:750px;}}
#media screen and (min-width:989px) {.browser_logo{min-width:989px;}}
#media screen and (min-width:1010px) {.browser_logo{min-width:1010px;}}
#media screen and (min-width:1117px) {.browser_logo{min-width:1117px;}}
#media screen and (min-width:1245px) {.browser_logo{min-width:1245px;}}
#media screen and (min-width:1405px) {.browser_logo{min-width:1405px;}}
#media screen and (min-width:1645px) {.browser_logo{min-width:1645px;}}
#media screen and (min-width:1885px) {.browser_logo{min-width:1885px;}}
}
</style>
<img class="ie_logo browser_logo" src="images/clientimages/logo/logo.gif">
Why not just set .browser_logo { width:100%; } instead of using all of those media queries?
Perhaps it would be easier to understand what you were trying to do if you put it in a jsfiddle, or showed us the live link?
I am working on a fixed width legacy site and want to create a more optimal experience for tablet users by implementing a couple adaptive layouts. The first layout will be a 600px wide design and it will be displayed on devices with 600px - 768px screen widths. The second adaptive layout will be a 769px wide design and it will be displayed on devices with 769 - 1023 screen widths.
I want to know how I can use the viewport meta tag to make the designs scale up to fit into mobile browsers with widths larger than the original design.
For example, when the 600px design is viewed on a device with a 768px browser screen width, how can I make the smaller design take up the full width of the screen?
I have found a lot of information about adaptive layouts for websites with fluid grids, but nothing that specifically talks about the relationship between design width and viewport sizes for fixed width sites - at least not one that I can understand.
It is called responsive web development.
First step is to put below tag in your code inside head tag part.
For responsive design use media queries:
Now use the media queries, here is good example of media queries . Also learn how to use it.
Here is small snippet of code which will guide you how to use:-
<style>
.clear{ clear:both;}
/*this will work for desktop*/
#media only screen and (min-width: 801px){
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for tablet*/
#media only screen and (max-width: 800px) and (min-width: 521px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for mobile*/
#media only screen and (max-width: 520px) and (min-width: 320px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
</style>