I'm new to adaptive/responsive web development. I'm confused over how mobile devices handle the change of screen resolution when the orientation of the device is changed.
If I create two media queries - one for 320 (portrait) and one for 480 (landscape), the iphone only loads the 320 version, regardless of the orientation, adn just zooms to fill the screen.
Is there a way of delivering the new 480 styles when the iphone is loaded in landscape position, or when the iphone is tilted from portrait to landscape?
First of all media queries have a property that you probably discovered
#media all and (orientation:portrait) { … }
#media all and (orientation:landscape) { … }
You could force render on the iPhone via
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
and then use some css to target landscape mode
#media screen and (min-width: 321px){
//styles
}
CSS media queries are a bit tricky with orientation form a device to another.
You still have a good js option:
window.addEventListener('orientationchange', changeOrientation, false);
function changeOrientation() {
if (orientation == 0 || orientation == 180) {
//portraitMode
}
else {
//LandscapeMode
}
Related
I am using Zurb Foundation 5 for my project, I compiled the stylesheet using the default SASS build command.
I would like to know, is it possible to show different layouts on mobile landscape mode and portrait mode without using "show-for-landscape / show-for-portrait" classes? but just using "small-x/medium-x/large-x" classes?
<div class="row">
<div class="columns small-6 medium-4 large-4">A</div>
<div class="columns small-6 medium-8 large-8">B</div>
</div>
My mobile (Samsung note 2, resolution = 720 x 1280 pixels) always showing the "small" styling when viewing the above example (No matter using the landscape or portrait mode)
FYI, I have added
<meta name="viewport" content="width=device-width, initial-scale=1" />
on the document already
According to the link http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html, it stated that width=device-width will always return the device portrait width, is it the reason why zurb foundation 5 always gives me the "small" styling?
This can be achieved using media queries.
#media screen and (orientation:portrait) { … }
#media screen and (orientation:landscape) { … }
CSS media queries is it possible to detect portrait / landscape tablet mode?
There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:
#media (max-width: 767px) {
.sliderContent {
width: 100%;
}
}
When I check one page on an iPhone, it loads this CSS, but the other does not use this style.
I have added an alert with the screen size in both pages, and both have the same width.
Do you know where the max-width is taken? that could be making the difference between the two pages?
Can the HTML somehow affect the size of the min-width?
Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.
The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.
https://hacks.mozilla.org/2013/09/css-length-explained/
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21
I am designing a responsive website. In responsive web designing we cannot specify the image width and height in "img" tags. But without width and height the site is very slow. Is there any solution for this?
You can duplicate the image, one for large screen and one for small screens ( thumbnail ).
<img src="large.jpg" alt="images alt for big screens" class="show-for-large"/>
<img src="small.jpg" alt="images alt for small screens" class="show-for-small"/>
Css:
.show-for-large {display:block;}
.show-for-small {display:none;}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.show-for-large {display:none;}
.show-for-small {display:block;}
}
And you can display:none the small img for large screen and on responsiveness you can do display:block;
The browser doesn't render the elements with display none, so this can be a trick.
I have website with fixed width of 1000px. I want to support 2 smaller widths of this page. I have succesfully done this through CSS media-queries like this:
#media only screen and (min-width : 800px) and (max-width : 999px) {
#content { width:800px; }
}
#media only screen and (max-width : 799px) {
#content { width:600px; }
}
Now when I test my webpage on Android browser (2.3.3), it uses viewport width of 1000px so it displays website in full width. But it would be much better, if it would chosen viewport width of 800px, because webpage would display more optimized for device with smaller displays.
I know I can set viewport width using e.g.: <meta name="viewport" content="width=800px" /> or to set width coresponding to device physical width using: <meta name="viewport" content="width=device-width" />, but none of these would work. Because either it would force all mobile devices to always use 800px viewport in first case, or it would use physical width of pixels on device in second case, but that wouldn't work out too, because in portrait mode (how most people surf mobile web and use phone) that would be 300px or at most 400px, which is too small and user would have to scroll horizontally a lot.
So actually my question is this - can I support and possibly force mobile browsers to use different viewport widths depending on their actual screen size ? I don't know if I explained it properly enough, so I will get example what I want to achieve:
For mobile devices with physical width of 400px (modern devices with bigger displays) I would like to force viewport of 800px width and possibly with scale 0.5 so on first page visit would be displayed full without need of horizontal scrolling and with user option to zoom in to parts of the page.
For mobile devices with physical width of 300px ( some middle-class and low-end devices ) or smaller - I would like to force viewport of 600px width and possibly with scale 0.5 so on first visit would be displayed full or at least most of it on screen with little horizontal scrolling needed. And of course, user could zoom in to parts of the page.
Is this possible set up using just CSS or CSS3 ? I can imagine JS solution, but I would like to implement this just using CSS.
Thank you for any help in advance.
I do understand some part of your question...I have mainly worked on iPhone / iPad devices and less on Android ones...
I would recommend using
<meta name="viewport" content="width=device-width" />
to set the viewport based on devoce width..
Now even though you say, it would not work on orientation change, on the iPhone/iPad, the device width is always 768px whatever be the orientation.
So atleast on those devices, setting to device width would be fine..
For the Android devices, i am not really sure if the device width is returned different in each orientations..
My guess is it should be the same.
Could you please try setting the meta tag as above and see if it works fine. if no, i would be able to suggest some other way..
Thank you.
just add a few more media queries and css zoom
//base setting, overwrite with other queries
#content { width:800px; }
#media only screen and (max-width : 799px) {
#content { width:600px; }
}
#media only screen and (min-width : 400px) and (max-width :599px) {
#content { width:800px;}
//don't need to set zoom as it is handled by the next media query
}
#media only screen and (max-width : 599px}
body{zoom:200%}
//don't need to set #content as it has a default value of 600 set in the first media query.
}
You could also set initial-scale by doing user-agent sniffing, or adding it via javascript based on widow size, however via css only, you could use zoom to zoom in (user can always zoom out)
Here is some Css that may help you:
// target small screens (mobile devices or small desktop windows)
#media only screen and (max-width: 480px) {
/* CSS goes here */
}
/* high resolution screens */
#media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(min-resolution: 300dpi) {
header { background-image: url(header-highres.png); }
}
/* low resolution screens */
#media (-webkit-max-device-pixel-ratio: 1.5),
(max--moz-device-pixel-ratio: 1.5),
(max-resolution: 299dpi) {
header { background-image: url(header-lowres.png); }
}
If not have a read through this link
http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript
Have you tried simply zooming completely out, then letting the user scale in to see whatever it is you want?
Try:
<meta name="viewport" content="width=device-width,minimum-scale=0.25,height=device-height,user-scalable=yes" />
You could do this in javascript by getting the viewport element (either by id or name) and setting it by inspecting the screen.width or window.outerWidth on the fly.
function setViewport() {
var viewport = document.getElemementById("viewport");
if(window.outerWidth <= 400) {
//screen.width gives display pixel count, use window.outerWidth for physical pixel count.
viewport.setAttribute('content', 'width=800);
}
}