Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to force a tablet to display wide

Posted on 2013-11-28
15
Medium Priority
?
190 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

618 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