Task: Trying to make a mobile webpage: http://jsfiddle.net/anujbhai/hgaH7/3/ (also include jQuery & Bootstrap files in order to run properly).
Problem: Page should change layout according to Orientation - in landscape mode
<div id="videoThumbs">...</div>
will show 2 thumbnails and snaps beneath the
<div id="billboard">...</div>
while in the portrait mode the latter goes to the left of the screen and the former now shows only one thumbnail, appearing like a sidebar.
This is very hard to do with just mediaqueries and Bootstrap. I can't figure out a proper logic to be applied via JavaScript. Please help.
You can try using the default Bootstrap responsive utility classes.
Take a look at the documentation:
http://getbootstrap.com/css/#responsive-utilities-classes
http://getbootstrap.com/css/#grid-options
Small and Extra small devices classes can work for portrait tablet view and Small and Medium devices classes can works for landscape mode, you need to try various combinations.
Obviously, depends on the screen size of the tablet, but this works excellent in 7" and 9" tablets.
Related
I have to override the property of a css element when it is viewed on mobile screen. Like there is a logo and it's top margin should be different when on desktop and some other value when on mobile or tablet.
Is it possible. If yes then how?
You can do this easily with Media Queries in css.
Here is a link from where you can get all media quires used for mobile responsive layouts: Media Queries for Responsive Layouts
In specific curly brace you have to write the css for elements for which you want changes with mobiles, tablets and other devices.
Like, as per your question you can change css for logo for mobile, tablets and other desktop screen.
Let me know if it helps you or not.
Thanks,
Mrunal.
I am new with semantic-UI and i love with the framework. They have vast of helpful documentation though, and more so confusing thing.
How does the Responsive visibility work?
There are the mobile only tablet only small monitor onlylarge monitor only for the container... and some of the code, I found that there was computer only, device only ? What are the difference? thank you.
Updated to reflect current docs and version 2.4.2
Responsive Visibility works by hiding a certain element (usually a ui container, but can also be e.g. grid rows) on specific screen sizes. For example, <div class="ui container mobile only"> would only be shown when the screen is less than 768px wide.
The documentation for Grid has a Device Visibility section which demonstrates several possible visibility modifiers:
Mobile (mobile only)
Tablet (tablet only)
Tablet and Mobile (tablet mobile only)
Computer (computer only)
Large screen (large screen only)
Widescreen (widescreen only)
All Sizes (no modifier)
The documentation doesn't explicitly mention what the device breakpoints are. Like most things, they can be configured via SASS variables when building Semantic UI and are defined inside site.variables. The default breakpoints are:
mobile only will only display below 768px
tablet only will only display between 768px - 991px
computer only will always display 992px and above
large screen only will only display between 1200px - 1919px
widescreen only will only display 1920px and above
As seen in the documentation for Grid, it's possible to combine these as well - e.g. tablet mobile only and mobile computer only are perfectly valid.
This can't display below 768px:
<div class="ui container mobile only">
The correct expression is below:
<div class="ui container mobile only grid">
tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?
I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.
I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.
The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.
Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.
You could use Modernizr to pick between two stylesheets to load.
In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.
#import path/your-mobile-styles.css #media (max-width: [tablet portrait width]);
Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.
Modernizr.load({
test: Modernizr.touch,
yep : 'your-mobile-styles.css',
nope: 'small-enough.css'
});
You could probably target those devices using a media query along the lines of
#media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
styles
}
We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.
Is there any way to disable bootstrap responsive only on tablet or to set a specific size for the display in px??
I want Bootstrap only responsive on mobile phones and desktop.
So, if the page is opened on the tablet, then the display appears as a desktop display.
In Bootstrap 3, go into the variables.less file. Find:
#screen-md: 992px;
change it to:
#screen-md: #screen-sm;
Compile.
Use css #media queries. Read up about media queries here.
Open up your bootstrap.css file. Now, do a Ctrl + F and look for #media somewhere. It'll have the screen size as it's argument. You simply need to comment out the size corresponding to your tablet.
You can use Bootstrap's customizer to achieve that.
Basically what you want is that the tablet layout is the same as the desktop layout. The way Bootstrap determines which version to display is with 4 variables: #screen-xs-min, #screen-sm-min, #screen-md-min and #screen-lg-min for extra small, small, medium and large.
Extra small is usually for phones, small for tablets, medium for small desktop screens (or large tablets) and large is for very large desktop screens. Note that this isn't a guarantee, it just uses more of your screen real estate when it's available.
So what you want is for the tablet break point #screen-sm-min to never occur, so you can just set its value to 0 (or 1, I'm not sure 0 is an accepted value.
Alternatively, you could just remove all the CSS that's surrounded by a #media query for the width of the tablets.
I suggest you read more about Bootstrap's responsive utilities, it's better to use them properly then just get rid of them.
I am building a Phonegap application with two layouts: one for 'handhelds' and one for 'tablets.' I want devices larger than 6 inches to display the tablet layout and smaller devices to use the handheld layout.
I've looked into media queries. My concern is that if I target a device by pixel size, for example iPad1 768px, a high-density handheld will come along that also qualifies for this query, showing the wrong layout and making the text unreadable and the widgets too small. I've considered webkit-min-device-pixel-ratio > 2 for this query, but doesn't that leave 'gaps' where an unfortunate combination of resolution and pixel ratio triggers the tablet template on a handheld device?
So, what is a general strategy I could follow to reliably 'pick one' of these two layouts (and avoid overlaps between devices) when the device loads? I am only supporting portrait mode and I can change all CSS, JS, <meta name="viewport"> etc..
Essentially, I'd like to be able to come up with some rules to differentiate between columns 2 and 3 here http://nmsdvid.com/snippets, but without targeting specific device models.
Thanks!
I think pixel width in media queries are still standard width, all current iphones display a document width of 320px. This is as the UIwebview used in phonegap is just a standard browser environment.
My css needs depend on the amount of cross over between my iphone and Ipad versions of my app. If the css is almost the same I will just have extra css for Ipad devices in the one CSS file using a media query, otherwise I will have a different file for each.