I'm using getbootstrap for building my website. According to my design, I don't want to show the portrait view of tablets. How can I eliminate this?
I just want iPad landscape and desktop normal, iPhone portrait and landscape. How can I eliminate all other views?
You will need to customise the screen width values under the section Media queries breakpoints in http://getbootstrap.com/customize/.
This will then generate one or more custom CSS files that you can add to your site.
You will of course have to specify the correct values for iPads and iPhones with or without Retina displays. This should help:
http://stephen.io/mediaqueries/
The bad news is that you may have to hack the CSS generated from getbootstrap.com in order to set the media breakpoints explicitly for Retina devices using -webkit-min-device-pixel-ratio: 2.
Related
I am fresh new to CSS in general and responsive design specially,
I had an old website which i successfully redesigned with CSS and everything is fine, when trying to make it responsive i just discovered media queries and i started with restyling the footer using :
#media screen and (max-width:720px){ etc ...}
That works ok and my footer is restyling well, my question is :
This looks fine in my mobile which is 720px width, but in the case of a mobile with for example 1080px width it will show the desktop version ? how to avoid that ?
I mean if i try with :
#media screen and (max-width:1280px){ etc ...}
To include high resolution mobiles, it will show the mobile version on desktop screen that are 1280px width ?
What is the correct usage, ? Thanks
Don’t worry about a device being mobile or desktop or whatever.
Media queries allow you to apply difference style sheets based on the window size.
If you have a media query for devices that are 720px wide or less and the design in that CSS works for screens that wide and another media query for devices that are wider that that, and the design works for devices that size, then everything is fine.
So I have a navbar defined in bootstrap 3, however I would like to change the size, color, and <li> elements when a user visits it on a mobile or tablet browser vs a desktop. What would be the best way to go about this? I thought about using media queries but I am not sure where to start.
If you want to customize this more for mobile jasny perform these plugins are very good for, I have implemented in my projects and work very well for the mobile "menu offcanvas"
jasny bootstrap offcanvas
Media query is a good way to fix your problem. The boostrap navbar default breakpoint seems to be at 768px. see on coderwall
#media (max-width: 768px) { "your modifications here" }
My way is.. 1.- detect iphone/ipad/android with jquery, 2.- Use custom media queries to target iphone, ipad. Later test in a device because using media queries only target on desktop not in a device or smartphone resolution.
My phone (LG G2) has a viewport size of 360px 598px.
Col-xs aims devices smaller than 768px, so that means that wether the user is in portrait or landscape mode, he will have the same result, even though in landscape mode i could display more elements due to its larger width. That's why i wonder why the smallest media query is 768px in bootstrap, which doesn't take into account phone's portrait/landscape view.
Thank you for any clarification.
Although the LG G2 "could" display more information in landscape, thats not what resposive webdesign intended.
Bootstrap (and others respectively) did choose those breakpoints to create widespread groups of screen sizes/devices.
They decided to use the iPads width in portrait (768px) as their breakpoint between typical phones and tablets, which makes perfectly sense regarding the amount of work to do. Responsive webdesign is all about creating those groups of devices, to not have to code hundreds of versions for thousends of device types, and still be able to create an optimised view for most devices.
Of course you can still use customised versions, but the more viewport groups you create, the more adjusting and testing will be necessary (and soon enough you're back to useragent sniffing times)
so, I want to do a "mobile" friend view of my site. Its liquid designed already, but mobiles need definitely different look. Now, how to detect if I visited it with mobile (iphone, ipad, android)? More specifically, I imagine it as if the screen width is smaller than a value (dunno that value), then thats considered a mobile client. How to detect, so that generate the mobile optimized CSS/HTML outputs? Maybe im too simple, but to me mobile client = smaller screen, and nothing more
There isn't really a great way. Before you used to be able to say if under a certain number of pixels then it is a phone. But now phones are getting both higher pixel count but also crucially large screens too. Tablets are as small as 7" now, but they could get smaller. Some phones are over 5" and could get bigger. Then there are things like physical pixels to css pixel ratios to think about.
If not screen size or pixel count, maybe it could be if it supports touch or not. But Windows 8 threw that on its head, as that supports touch on the desktop.
I would say it depends on the content rather than the device. Test your site using various widths. See when the width becomes sub-optimal for the content, and throw in a media query there to adapt the layout. I think a content first rather than device first strategy is more future proof.
Also remember that it may not just be a mobile that wants your mobile friendly layout. For example soemone could be using their browser in a small window, rather than full screen, or they could be using the snap mode in Windows 8, where the width is the same as a iPhone width at 320px.
Use media queries. Then you can detect if you are on a mobile device the browser will load the mobile CSS and if you are on a PC the browser will load the PC version of the CSS.
http://www.w3.org/TR/css3-mediaqueries/
Then you can develop the mobile device CSS like this way (supose the mobile have 480x640 pixels):
#media screen and (max-device-width:480px){
...
put your mobile device CSS code here
...
}
Supose you want develop CSS for tablets (1.024x768pixels)
#media screen and (max-device-width:1024px) and (orientation:portrait){
...
put your tablet device CSS code here when tablet has portrait orientation.
...
}
#media screen and (max-device-width:1024px) and (orientation:landscape){
...
put your tablet device CSS code here when tablet has landscape orientation.
...
}
And for PCs (1280x968pixels):
#media screen and (max-device-width:1280px){
...
put your PC CSS code here
...
}
i am making a new portfolio for myself and i want it to work across all platforms..
i have got it working on desktop, mobile portrait, ipad portrait and ipad landscape, all with different media queries set up..
however when i load the page on my android in landscape it does this :
* loads up the desktop version
* zooms right in rather than fitting to the screen
i would really want the phone landscape to load up the tablet landscape view as the screen sizes would be similar, but everything ive tried has no effect on it at all..
can check my code over at: www.stuffmadeby.me/test
By checking your code, the only media-query for landscape is (min-width:768px) and (max-width:1024px), are you sure the width of your android device isn't to small or too big ?