Solved

How to force a tablet to display wide

Posted on 2013-11-28
15
181 Views
Last Modified: 2013-11-29
How do you force a tablet computer to display wide?
0
Comment
Question by:burnedfaceless
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39684357
Are you using media queries?
You could detect if in portrait mode with the media query
orientation:portrait

and then rotate the whole web page buy targeting the body tag with
-webkit-transform: rotate(90deg);
0
 

Author Comment

by:burnedfaceless
ID: 39684391
I want it to display landscape even if the user holds it vertically.

I read I could use body{orient= "landscape";} Syntax might be off.

This would be placed in a media query. Which min width media query would cover tablets?
0
 

Author Comment

by:burnedfaceless
ID: 39684409
Here's what happens when I flip the iPad vertical it displays desktop and mobile elements.

When I flip it horizontally it displays fine.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 39684418
Try this, not sure if it will work or not

@media all and (orientation:portrait){
body {
-webkit-transform: rotate(90deg);
}
}
0
 

Author Comment

by:burnedfaceless
ID: 39684421
I pasted your code in and it didn't work.

Here is what I tried that didn't work

@media (min-width: 768px) and (max-width: 979px) and (orientation = portrait) {body {orientation:landscape}}}
0
 
LVL 58

Expert Comment

by:Gary
ID: 39684423
That's not what I posted

I don't know what you are trying to do with
body {orientation:landscape}

Its not CSS
0
 

Author Comment

by:burnedfaceless
ID: 39684428
I pasted it from a site. It didn't look familiar.

The problem is the page doesn't render in portrait mode and I don't have time to go more in depth.

How would you recommend solving this?

edit: realized i mistyped tablet
0
 
LVL 58

Expert Comment

by:Gary
ID: 39684432
Did you try this

@media all and (orientation:portrait){
body {
-webkit-transform: rotate(90deg); 
}
} 

Open in new window


I edited your question title
0
 

Author Comment

by:burnedfaceless
ID: 39684445
Yes, didn't work.
This didn't either

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  body {
    -webkit-transform: rotate(90deg);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}

https://coderwall.com/p/q79kaq
0
 

Author Comment

by:burnedfaceless
ID: 39684446
I should add I'm working out of the bootstrap css but that shouldn't make a difference if placed last.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39684457
Try this

@media all and (orientation:portrait){
body {
transform: rotate(90deg); 
}
} 

Open in new window

0
 

Author Comment

by:burnedfaceless
ID: 39685615
I've actually found out it works sometimes but only when there are no other media queries.

So if you can answer how do I negate the queries or even better write them where they are all compatible I will award points.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39685633
Are you sure it is the very last query - after all the other css.
Have you a link to the page?
0
 

Author Comment

by:burnedfaceless
ID: 39685716
Gary thanks for your patience I have two issues:

1. http://conutils.com/dist will provide examples if you have an iPad. The contact page is the only one that doesn't work. The index of dist actually has media queries but I put them in the stylesheet for some reason. I really don't remember why because it had to do with that page.

2. I want this to happen on every single tablet device. So should I just go with what bootcamp recommends?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39685753
On the contact page you have
<style type = "text"/"css">

should be
<style type = "text/css">

Don't know how you ended up with the extra "
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question