CSS Expanding Based on Portrait or Landscape Screen Size

css expanding based on portrait or landscape screen size?

Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).

I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.

With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

Check out this example page for more explanation, or this one.

EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.

CSS to keep content in portrait or square mode

You can use the following CSS:

body {

  margin: 0;

  background-color: blue;

}

#wrapper {

  margin: 0 auto;

  max-width: 100vh;

  background-color: red;

}

<div id="wrapper">Content</div>

Mobile media queries in landscape mode?

There is a useful attribute/function in CSS called orientation which has two options:

1. Landscape
2. Portrait

And this is how you can use it:

@media screen and (orientation:landscape) {
   /* Your CSS Here*/
}

To attach the screen max and min width you can do something like this:

@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 480px) {
   /* Your CSS Here*/
}

See this reference: css expanding based on portrait or landscape screen size? and also a documentation about the @media queries on this page: https://css-tricks.com/snippets/css/media-queries-for-standard-devices

I hope this will help you :-)

Changing CSS for portrait screens (for example, iPad)

/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}

In phone landscape, show more text per line, not just bigger text

I found this answer and it works. Not sure if all are necessary.

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

html{ -webkit-text-size-adjust: none;} //style

It still allows zoom. If you also add

maximum-scale=1.0

then it does not allow zoom.

---

Related Topics