Can a site force block the rotation of a device?

Question

I am currently working on a site that is relatively equal across all devices; desktop and mobile. I work with% since I think this is the best option.

It is based on portrait mode. If you change the device to landscape, the whole website looks like a thick dwarf.

So, I am wondering: is it possible to block the site by displaying it in the portrait all the time?

And by that I mean: "The rotation of the device is blocked." Not that when you switch to landscape, the website returns to the portrait, but in the landscape. (I already saw some code in StackOverflow.)

Check my site at: http://prototyping.iscs.nl/mobiel.html 

for reference:)

Thanks in advance

Answer 1

In updating to the old ('12) question, I think it can help many people!

I did not understand the true way to block the rotation of the device, but came up with the ideal alternative that I saw, and some people too.

Option A. One simple alert

Using a simple jQuery script, you can determine the orientation of your device.

 if(window.innerHeight > window.innerWidth){ alert("Please use Landscape!"); } 

Well, a simple alert is easy, but a notification might be nicer!

Option B. One great image

Just add a fixed element to the page that will be displayed when the orientation changes.

HTML

 <div class="turnDeviceNotification"></div> 

CSS

 .turnDeviceNotification { position:fixed; top: 0; left:0; height:100%; width:100%; display: none; } 

You can update this element with text, or simply connect it to the background image using

 .turnDeviceNotification { background-image:url('../images/turnDevice.jpg'); background-size:cover; } 

Just add a nice background to the image folder, for example below.

Noticed that the object has display: none ? This is because otherwise it will be shown even in portrait mode. Now all you have to do is use the script below, so the object is displayed only in landscape mode.

 jQuery(window).bind('orientationchange', function(e) { switch ( window.orientation ) { case 0: $('.turnDeviceNotification').css('display', 'none'); // The device is in portrait mode now break; case 180: $('.turnDeviceNotification').css('display', 'none'); // The device is in portrait mode now break; case 90: // The device is in landscape now $('.turnDeviceNotification').css('display', 'block'); break; case -90: // The device is in landscape now $('.turnDeviceNotification').css('display', 'block'); break; } }); 

This will only show a notification if the orientation of the device has changed to landscape.

Answer 2

Impossible. Rotating the lock is the device setting: http://support.apple.com/kb/HT4085 If the device is not locked, the browser will rotate, and since your content is inside the browser, the content will also rotate. Perhaps the viewport will help in solving your problem: <meta name = "viewport" content = "width = device-width" / ">. I see that you are missing a meta tag.

Answer 3

I do not think this is possible, but there are several ways to get around

js way: window.DeviceOrientationEvent

css way

@media (orientation: landscape) { body { background-color: black; } }