UIWebView の、フレームサイズとビューポートサイズの関連がよくわからなくて悩む
投稿者: ytyng 8年, 7ヶ月 前
iOS Simulator 8.4
こんな感じで、画面より少し小さい UIWebView を作り、
CGSize displaySize = 画面サイズ
int leftOffsetPercent = 5;
int topOffsetPercent = 5;
CGRect webViewFrame = CGRectMake(
displaySize.width / 100 * leftOffsetPercent,
displaySize.height / 100 * topOffsetPercent,
displaySize.width / 100 * (100 - leftOffsetPercent * 2),
displaySize.height / 100 * (100 - topOffsetPercent * 2)
);
self.webView = [[UIWebView alloc] initWithFrame:webViewFrame];
このような ViewPort Meta を指定してある HTML を読み込んで表示してみたら
<meta name="viewport" content="width=device-width, initial-scale=1">
横スクロールバーが出て、WebView にコンテンツが入りきらなかった。
iPhone6 なので、displaySize.width は 375, webView.frame.size.width は 337.5 になってるが、 どうやらビューポートの device-width は、この375 で判断されてるようだ。
試しに、ブラウザ内で window.innerWidth を取得してみると 338 だが、 document.body.clientWidth を見てみると 375 だった。なぜこうなるのか理解できない。
横スクロールバーを消す方法に悩んだが、結局 HTML 内で、以下のように meta タグを動的に書き換えてみた
var viewPortMeta = $('meta[name="viewport"]');
viewPortMeta.attr('content', "width=" + (window.innerWidth - 1) + ", initial-scale=1");
かなり強引な方法だとは思っているが、うまくいった。横スクロールバーが消えた。
コメント