CSS to to allow a design studio display in only in portrait

[rnuma]

Hi experts

I am trying to prevent design studio to display in landscape (portrait only) and I have tried to use the below css to achieve this and it is not working as I don't know what I am doing wrong.

/* Smartphones (portrait landscape) ----------- */

@media screen

and (min-width : 320px)

and (max-width : 768px)

and (orientation : portrait)

[MustafaBensan]

Hi Robert,

The CSS media feature orientation is not intended for forcing the device orientation to landscape or portrait. It simply allows you to apply different styles based on whether the orientation is landscape or portrait. In other words, orientation:portrait will not force/switch the orientation to portrait.

If you provide a screenshot of your application with a description of what layout you would like to see in both portrait and landscape orientations then we can try to suggest design approaches accordingly.

Regards,

Mustafa.

[rnuma]

Thanks Mustafa for your response.

landscape.jpg

portrait.jpg

Please see the above screenshot of the application both in landscape and portrait as displayed on an iPhone 6.

What I am trying to achieve is to prevent the application from displaying in landscape on an iPhone (Portrait only)

Regards

Robert

[MustafaBensan]

Hi Robert,

If you are consuming the Design Studio application directly in the iOS Safari browser (as appears to be the case in your scenario), then you CANNOT lock the orientation in Portrait Mode using CSS. This is by design and explained in the answer of the following post:

https://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-ipho...

As suggested in the above post, you could display a message when the device is in landscape orientation to alert the user that this mode is not supported.

If you consume the Design Studio application from the SAP BI Mobile app for iOS, which is the SAP recommended approach, then the iPhone version of the app is locked in Portrait mode as per your requirement.

Regards,

Mustafa.

[rnuma]

Thanks Mustafa

Whilst still dealing with this, is there also a design issue when design studio application is consumed directly in IOS safari browser and scroll is not available but on a desktop browser the scroll is. Is there a way around this

[TammyPowlas]

Hi Robert - which version and SP of Design Studio are you using?

Consider using Lumira Designer which has an adaptive layout https://help.sap.com/viewer/4f58d91f03e441b68d3187e94be27df2/2.0.2.0/en-US/2e39302ef2184dce8a7265fb0...

[rnuma]

Thanks Tammy for your response.

I am currently using Design Studio 1.6 SP3

I couldn't open the link to the suggestion you made

[TammyPowlas]

Hi Robert - that is strange; it is a link to the SAP Help at help.sap.com

Any chance you could download Lumira Designer 2.0 SP2 to evaluate the adaptive layout for your needs?

[Vidhya]

Hi Robert,

Please check this URL,

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://www.projectseven.com/products/templates/pagepacks/adaptations/tutorials/media-queries/index.h...

https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

https://gist.github.com/staydecent/1021805

Regards,

Vidhya

[rnuma]

Thanks Tammy for the support. We currently do not have any plans of implementing Lumira anytime soon

[rnuma]

Thanks Vidhya