html — iPhone/iPad Viewport issues — Stack Overflow

html - iPhone/iPad Viewport issues - Stack Overflow Без рубрики

Avoiding blowup

To make sure your content is not blown up, set the maximum-scale to 1.0:

Sites with the above tag will get a 1:1 viewport for all devices and orientations. This is impractical if your site does not render properly at 320px wide. In this case, hardcode a width and also set a maximum scale so your site isn’t blown up on the iPad:

Tn2262

The Apple tech note “Preparing Your Web Content for iPad” has a good suggestion: avoid hard-coding a width for your viewport. On the iPad, a viewport width smaller than 1024 can cause your content to be blown up and blurred. Their suggestion is

This is an improvement, but your content will still be blown up if your device is in landscape mode. This is because device-width is the width of the physical device (320px or 768px), not the width of the screen in the current orientation. As a consequence, you can get content rendered at 768px and blown up to 1024px.

‎viewport

Healthcare workers affiliated with Medherent™ can securely connect with their clients, and know if they have missed a prompt, all at a glance.

You can directly contact client via Viewport using SMS.

This app requires approval to connect is not intended for general public usage.

Viewport for ipad portrait [only]

I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.

Things were working great with

<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />

combined with

<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)

Читайте также:  Как пополнять счет в App Store и iTunes Store без комиссии с помощью приложения Яндекс.Деньги | Яблык

Things looked good until I tested it on an iPad in the iOS Simulator. In portrait things looked alright, but in landscape orientation some elements (specifically those with width: 100%) adjusted to the viewport width, while some didn’t (that one element with width: 1550px). This meant that when scrolling right (or zooming out) to view the entire 1550px element, the elements with width: 100% were left dangling from the left side, only about half as wide as they should be.

The solution was far from obvious, but here’s how I solved it:

base.css

body{
    width: 100%;
    min-width: 1550px; 
}

mobile.css

body{
    min-width: 100%; 
}

This explicitly sets the miniumum width of the body element to 1550px for all devices wider than 880px, including tablets that take the viewport meta tag into account.
When viewed on a mobile device with a width less than 880px, the width of the body element is reset to simply 100%, i.e. the viewport width.

Hope this will help someone out there struggling with different layouts for different devices.

Viewports

Mobile Safari presents desktop-sized sites on small screens by rendering to a virtual browser screen that is 980px ((Of course, when the iPad is in landscape orientation of 1024px wide, it will use 1024px.)) wide, and letting you pan and zoom that page.

Craig Hockenberry famously determined the ideal viewport tag for content sites in the iPhone era. That technique is no longer sufficient for the iPad because it can blow up your content larger than 1:1, blurring your images.

Оцените статью
iPad Мобайл
Добавить комментарий