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?
Related
I am using Meteor and Semantic-ui 2 and can't get the stackable grid to work on mobile (iPhone 6). When I resize my computer screen everything works fine but not on the mobile. On the mobile I have 3 columns and space on the sides (just as a large screen). It should be stacked in one column and use 100% of the screen. As I can understand mobile is defined as below 768px and iPhone6 is 750px. Do anyone have any suggestions or answers to solve this?
<div class="ui three column stackable grid container">
<div class="four wide column"></div>
<div class="nine wide column"></div>
<div class="three wide column"></div>
</div>
Just figured it out as I asked a question on gitter.im
Since the header markup is mainly handled by Meteor I forgot to add the
<meta name=viewport content="width=device-width, initial-scale=1">
I added it in my layout template as I am using Iron Router at the top of the page and it worked
Foundation 5 is toted as being mobile-first, but for a web-app that is desktop-only I need to disable the responsive behaviour that kicks in when shrinking the viewport size.
We're currently using a very minimal grid-only Foundation setup without much customisation.
Is there a way to set a specific app width without having to get the Foundation _settings.scss file to alter the #media queries, as suggested in this post?
If you still want to use the grid, the easy way to disable responsiveness is to remove the Viewport tag in the header:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And then after Foundation is called in the SCSS or CSS, .row will need to be set to a fixed width rather than max-width:
.row {max-width:none; width:960px;}
The question https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button by #twilight-pony-inc has been closed.
I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.
Example:
The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.
Interesting question. What #twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only).
Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.
Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:
#media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:
The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).
Twitter's Bootstrap 3
TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.
So with Twitter's Bootstrap 3 you can build your navbar with:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
For this reason you should use the “.col-” prefixes for your mobile app:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
See: http://bootply.com/73382
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
}
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);
}
}