If you want a CSS-only solution I would suggest a media query to detect
when the screen width has dropped below around 400. Like this:
/* Smartphones (landscape) ----------- */ @media only screen and (min-width
: 321px) { /* Styles */ }
This snippet is from a nice CSS Tricks article called "Media Queries for
Standard
Devices<http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/>",
which is relevant.
Of course, not every handheld device is 320px or 320pt wide in portrait
anymore, see the chart of resolutions, at the link below, for example:
http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/
For this reason you may even want to make use the Device Orientation API.
Support across desktop browsers is super-sketchy at the moment (none offer
full support of the spec yet), but Mobile Safari and Android Browser have
enough support that you could use it to know when the device is in portrait
orientation. However, for this use case, media queries really do offer
enough visibility.
You can make media queries via Javascript as well using Modernizr. For
example, here's a function I use to check for handheld devices:
function isHandheldLandscape() {
return Modernizr.mq('only screen and (min-width: 321px)')}
function isHandheldPortrait() {
return Modernizr.mq('only screen and (max-width: 320px)')}
On Tuesday, June 4, 2013 9:53:58 AM UTC-4, Liam Dawe wrote:
>
> Okay so I am wandering how we can get our navigations bar to get smaller
> when your phone is held upright vertically not horizontally?
>
> Currently I use three different navigations one for desktop, one for
> tablet and one for phone using the ".hidden-desktop" etc classes. Is there
> a decent way to hide even more when a phone is vertical?
>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
