All geek questions in one place

Mobile Safari Reflow without resizing - wrong behavior

Edit 2 This question is looking for a sleek, clean way to rephrase text on iPhone.

Improved web application with two different widths (320 and 480) depending on the orientation. The goal is also to have 480 widely available for non-mobile (i.e. 480 pixels wide screens). It works mostly at will, except when the page is being updated in the landscape. This forces the layout to return to 320 (on the left side) and leave a dark bar on the right.

  • Download to portrait

1. Portrait (after load)

  • Rotate to landscape

2. Landscape (after rotate)

  • Refresh in landscape

3. Landscape (after refresh)

He turns back to the portrait and back again to resize and image 2. This is a matter of convenience for me. The page is resizable and rotates perfectly on Android and is full-sized on the desktop. Does anyone know what I am missing? I tried many iterations of this and read about a few solution errors. None of the ideas change the result. About the file to receive the error message. I have a hunch that it is in the #container media content lines.

Edit: The site was created for mobile devices (320 widescreen). The desire to expand the use of space when that space is available. The main intention is to reschedule the text and elements. . When looking at photos, pay attention to the alignment of input fields with their labels.

I tried 2 approaches to this work. Another was using javascript to change the width of the #container. Currently used with the following media queries at the end of the built-in style sheet. I prefer to solve this with media queries.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="HandheldFriendly" content="True"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>The Title</title> <style type="text/css"> html { margin: 0; padding: 0; } body { font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif; } #container { margin: auto; width: 480px; ..... @media screen and (max-width: 480px) { body { -webkit-text-size-adjust: none; } #container { max-width: 480px !important; width: 100% !important; } } @media screen and (max-width: 320px) { body { -webkit-text-size-adjust: none; } #container { max-width: 320px !important; width: 100% !important; } } </style> .....
+6
source share
1 answer

Got a breakthrough. After dozens of variations in media queries, this code “broke” the problem:

 function orientation_change() { if (window.orientation == 0 || window.orientation == 180) document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"); else if (window.orientation == -90 || window.orientation == 90) document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"); }

from:

 <body onload="orientation_change();" onorientationchange="orientation_change();">

Media queries from the original question are still included to update the text when a turn occurs. However, the problem of updating a partial black screen has disappeared. Got an understanding of Apple iOS Safari Web Content Guide . In particular, handling event orientation.

Hope this helps in responsive web design.

+5
source

Source: https://habr.com/ru/post/917747/

More articles:


All Articles