2


I just started with Zurb-Foundation, and I am trying to make a website that needs to be run in landscape mode only, when it is started on a mobile device(small screens)
How would i do this? I guess it has something to do with media queries.

So I want it to force orientation to landscape mode if the screen is a mobile device.

This is a website, not an Application to Android or IOS.

I am working in Foundation 5, thanks for any help.

Turnip
  • 35,836
  • 15
  • 89
  • 111
Oliver Nybroe
  • 1,828
  • 22
  • 30
  • 1
    in your AndroidManifest.xml add **android:screenOrientation="landscape"** to the activity that contain your webView – Rami Nov 26 '14 at 10:34
  • I came up with a hacky solution for something similar a few days ago: http://stackoverflow.com/questions/27012827/can-we-make-our-webpage-open-defaultly-in-landscape-mode-for-mobile-tablets-usin/27014471#27014471 – Turnip Nov 26 '14 at 10:38
  • @Rami, I can see I did not tell my question correctly. It is a website, not an mobile application. – Oliver Nybroe Nov 26 '14 at 10:39
  • @uʍopǝpısdn, that looks interesting, gonna try that out. – Oliver Nybroe Nov 26 '14 at 10:40
  • @uʍopǝpısdn, Your answer is interesting, but it actually doesn't answer my question completely as i asked for mobile device only. But should be easy to make it work with something like 'if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { code }' – Oliver Nybroe Nov 26 '14 at 11:33
  • Put `@media only screen and (orientation: landscape) {}` in you CSS – general03 Nov 26 '14 at 15:05
  • @general03, That just do so i can make specific css for landscape mode, not force portrait to landscape. – Oliver Nybroe Nov 26 '14 at 19:17
  • @uʍopǝpısdn, I can tell that your code does not work with Foundation framework, and you have to refresh the page for after it has changed to your custom portrait. But nice try though :) – Oliver Nybroe Nov 26 '14 at 20:49
  • You shouldn't have to refresh if implemented properly. And it's also doubtful that Foundation would have anything to do with it. But as I said in that answer, this would be a bad idea anyway – Turnip Nov 26 '14 at 22:07
  • 2
    You can used `@media only screen and (orientation: portrait) {}` put inside the visibility of a div which display "Turn your device to access on this website" for instance. And `@media only screen and (orientation: landscape) {}` put all CSS website inside it – general03 Nov 27 '14 at 07:03
  • @general03, Yes that is also what i already do, but that solution is not what I seek, as I would like the users not to turn the screen themself. – Oliver Nybroe Nov 27 '14 at 07:52
  • Your users have to turn the device themself to see the content ... You have also this [javascript solution](http://stackoverflow.com/questions/11187445/force-device-orientation-to-landscape-via-css-js-html) – general03 Nov 27 '14 at 07:57
  • You can also use `class="show-for-landscape"` on the content to see only for the landscape – general03 Dec 01 '14 at 12:33
  • The solution I am doing right now is just using media queries, so I was not able to do it the way I wanted to, so the user has to turn the screen. – Oliver Nybroe Dec 01 '14 at 12:36

2 Answers2

1

With the orientation selector that general03 recommended, I added the transform property:

@media only screen and (max-width: 630px) and (orientation: portrait) {
  .video-container{
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
}
Jeff B
  • 88
  • 4
-2

create a webview in activity and in manifest declartion 

  android:screenOrientation="landscape"
deepak825
  • 432
  • 2
  • 8