Member Avatar for floatingDivs

Hi Daniweb,

Have a quick question I'd like answered.

Right now, I'm testing out liquid web sites on a smart phone powered by Android. When I load a (width:100%;) website with the smartphone being taller rather than longer, it comes out looking great. However, when I turn the smartphone 90 degrees, it looks terrible and covers only 30-40% of the screen. Is there anyway for a smartphone to render a width of 100% both ways? That way, when someone wants to read the shorter but wider version, they get the same percentage of width (100%) as someone who prefers to read the taller but skinnier version.

Thanks!

  • 3 Contributors
  • 2 Replies
  • 108 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by lowcostdesign

Dani AI

Generated

A common cause of the symptom described — portrait looks fine but rotating to landscape only fills a small portion of the screen — is the browser using a larger “layout” viewport and scaling the page. A mobile page without a proper viewport declaration will be laid out as if on a wide desktop viewport, then scaled down, so width:100% can end up meaning 100% of that virtual width rather than the device screen. The standard remedy is the viewport meta tag (details at MDN).

A minimal responsive baseline:

<meta name="viewport" content="width=device-width, initial-scale=1">

Plus CSS rules that allow fluid behavior:

.container { width: 100%; box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

Orientation-specific tweaks can refine the layout when the device is turned:

@media (orientation: landscape) {
  /* collapse sidebars or increase font-size for landscape */
  .sidebar { display: none; }
  .content { width: 100%; }
}

Notes and troubleshooting: HTML5 itself (as and discussed) does not automatically solve scaling — HTML5 helps with semantics and new APIs, but the viewport/meta + responsive CSS approach is what controls layout on phones. Test in desktop devtools device emulation and on real devices. Avoid fixed pixel widths for main containers; prefer percentages, max-width, and box-sizing. Older Android browser quirks (e.g., historical target-densityDpi hacks) exist, but the viewport meta plus responsive CSS is the correct, forward-compatible approach (see MDN on the viewport meta tag and responsive design).

Member Avatar for faico

Do you code the page using standard HTML, or HTML 5? HTML 5 is a better language for cross-platform web pages.

Member Avatar for lowcostdesign

Yes HTML 5 is better but is it really been tested so far for mobile web design?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.