CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
brainHax
brainHax

Reputation: 113

Disable Portrait View in Bootstrap

My website is okay in the landscape view on tablets ( iPad etc ) but not in a portrait view.

Is there a way to Disable portrait View for tablets in Bootstrap ? So when the tablet is rotated it will not rotate the view.

I believe this can be done in native mobile applications, so it it possible on web with css/js etc ?

thanks.

Upvotes: 0

Views: 4703

Answers (2)

Ruben Mercado
Ruben Mercado

Reputation: 1

Force landscape in little screens on Boostrap. Source http://scala9simo.blogspot.com.ar/2015/04/trying-to-force-landscape-mode-on.html

/* In CSS file */
@media (max-device-width: 480px) and (orientation: portrait) {
  .landscape-in-phone {  
        display:block;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
         min-width:460px;
    }  
}

<!--In HTML file -->
<!--Page main container -->
<div class="landscape-in-phone">       
  <!--All body content here -->      
</div>

Upvotes: 0

Tim
Tim

Reputation: 1690

Bootstrap is also just css and javascript. It's really the best solution to make your website work with portrait view instead of disabling it. If you are looking for something provided by Bootstrap, then you can do a lot using these media queries (based on Bootstrap's grid system). 

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Landscape phones and smaller */
@media (max-width: 480px) {

}

I don't know for what reason you disable portrait view, but I'm pretty sure you can make it work. All css applied within the media query brackets only apply to the given screensize.

Upvotes: 1

Related Questions