---
slug: "UIWebViewの、フレームサイズとビューポートサイズの関連がよくわからなくて悩む"
title: "UIWebView の、フレームサイズとビューポートサイズの関連がよくわからなくて悩む"
description: "\n\n\niOS Simulator 8.4"
url: "https://www.ytyng.com/blog/UIWebViewの、フレームサイズとビューポートサイズの関連がよくわからなくて悩む"
publish_date: "2015-09-11T09:53:21Z"
created: "2015-09-11T09:53:21Z"
updated: "2026-02-27T10:44:06.864Z"
categories: ["iOS"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20230812/3fda45fad5ee48168cc20fcfa1613ae9.png.webp?width=768"
has_video: false
has_music: false
video_urls: []
music_urls: []
lang: "ja"
---

# UIWebView の、フレームサイズとビューポートサイズの関連がよくわからなくて悩む

<div class="document">


<p>iOS Simulator 8.4</p>
<p>こんな感じで、画面より少し小さい UIWebView を作り、</p>
<pre class="literal-block">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];
</pre>
<p>このような ViewPort Meta を指定してある HTML を読み込んで表示してみたら</p>
<pre class="literal-block">&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</pre>
<p>横スクロールバーが出て、WebView にコンテンツが入りきらなかった。</p>
<p>iPhone6 なので、displaySize.width は 375, webView.frame.size.width は 337.5 になってるが、
どうやらビューポートの device-width は、この375 で判断されてるようだ。</p>
<p>試しに、ブラウザ内で window.innerWidth を取得してみると 338 だが、
document.body.clientWidth を見てみると 375 だった。なぜこうなるのか理解できない。</p>
<p>横スクロールバーを消す方法に悩んだが、結局 HTML 内で、以下のように meta タグを動的に書き換えてみた</p>
<pre class="literal-block">var viewPortMeta = $('meta[name="viewport"]');
viewPortMeta.attr('content', "width=" + (window.innerWidth - 1) + ", initial-scale=1");
</pre>
<p>かなり強引な方法だとは思っているが、うまくいった。横スクロールバーが消えた。</p>
</div>