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.
Related
Consider two screens:
same resolution
same orientation
but different physical sizes
Exempla gratia:
How can i target different screen sizes with CSS media queries?
Because, for example:
for the one 1920px wide display, it is uncomfortable to read the long lines of text that stretch edge-to-edge, and you'd want some padding, margin, or other spacing to narrow the text
but for the other 1920px wide display, you want text to go edge-to-edge
Bonus Chatter
And you can't try to invoke User-Agent strings:
i'm asking about CSS media queries, not User-Agent strings
the 4" screen could be connected to a PC
the 18" screen could be connected to a phone.
And you can't try to weasel out of the question by talking about orientation, or by musing if the screen supports touch or not, nor can you use the handheld attribute
I'm asking about using CSS to style a page based on the (physical) size of the screen.
Bonus Reading
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used (tries to rely on resolution)
Media Queries: How to target desktop, tablet, and mobile? (tries to rely on resolution)
How To Build A Mobile Website
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Using Media Queries For Responsive Design In 2018
What media query breakpoints should I use? (tries to rely on resolution) ("breakpoints" is another word for "pixels")
Media Query for Large Desktop
CSS media queries for handheld and not small browser screens
Media query about screen size instead of resolution
Well a typical media query for this would use min-width or max-width to hide or show things depending on display size. This is dependent on a <meta> tag which tells the browser to use the physical width of the display as the viewport width rather than using the resolution of the display as the viewport width.
For example:
<meta name="viewport" content="width=device-width"/>
and
#media all and (max-width: 600px)
{
/*Put your mobile styles here*/
}
It's not a perfect solution and doesn't really account for touch interfaces for tablets or other larger mobile displays, but it's a good place to start for building mobile user interfaces.
It's important to emphasize that this is intended for displays in which the content is scaled. I know for fact that most modern mobile devices use scaling (2x/3x on iOS and xhdpi/xxhdpi on Android), but it should also work with Windows scaling, though I'm not 100% sure on that and don't have a way to test it at the moment.
These media queries can accept any CSS unit as well, so you could very well use actual inches if you wish.
#media all and (max-width: 3.5in) { /* ... */ }
I have a website I want to fit on a mobile device. I do know that all mobile devices have different screen sizes. what is the best way to go about this?
I also know that you can put #media or at #media screen
is there a difference between those 2 as well?
The best way to do this is by having the divs width measured by percent . like have to divs of 50% each, which will be displayed the same way on any screen . Using percent is the best way. Another way thats much simpler is using bootstrap, which has existing css classes that will help you create responsive divs, images, ect. They have all the right classes that will work for mobile and pc. hope this helps
There are many different practices for building mobile friendly websites. The most notable being Responsive Web Design.
Another method would be to create device specific templates that would need to be coded individually for each devices screen size.
Clearly, the latter of the two is the most labor intensive and can be avoided and used only when working with drastic screen size differences. For instance, you may want to have separate templates for different types of devices instead of screen sizes (phones, tablets, computers).
Doing device specific (not screen size specific) styles allows for better use of space on bigger resolution devices.
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.
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.
I've been using min-width: 600px as my breakpoint in my CSS media queries. My rationale was that at 600px and above I'd capture tablet devices (Kindle Fire, iPad, etc) and below 600px would capture all of phone devices.
It turns out that while the iPhone plays nice by doubling its pixels, but still reporting being 320px x 480px, there are a ton of Android phones out there with resolutions like 700px x 1280px. The trouble is, how do I capture these devices without giving them a tablet-like interface?
Normally I'd just let the content respond to the pixel resolution of the device, however, a 1280px layout on a 4.3in screen just doesn't look right, especially since my application deals with a lot of form elements, which on a phone you want to span the entire width, but on a tablet or desktop you do not.
One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.
Please use responsive css framework to avoid this kind of problem. I would suggest using Foundation or Twitter Bootstrap