---
slug: "UIWebViewの、フレームサイズとビューポートサイズの関連がよくわからなくて悩む"
title: "Struggling to Understand the Relationship Between Frame Size and Viewport Size in UIWebView"
description: "\n\niOS Simulator 8.4"
url: "https://www.ytyng.com/en/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: "en"
---

# Struggling to Understand the Relationship Between Frame Size and Viewport Size in UIWebView

<div class="document">

<p>iOS Simulator 8.4</p>
<p>Here's how to create a UIWebView that's slightly smaller than the screen,</p>
<pre class="literal-block">CGSize displaySize = screenSize;
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>When I loaded and displayed an HTML with a ViewPort Meta specified like this:</p>
<pre class="literal-block">&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</pre>
<p>A horizontal scroll bar appeared, and the content did not fit within the WebView.</p>
<p>Since it's an iPhone 6, displaySize.width is 375, and webView.frame.size.width is 337.5.
It seems that the viewport's device-width is judged to be this 375.</p>
<p>Out of curiosity, when I obtained window.innerWidth within the browser, it was 338, but
when I checked document.body.clientWidth, it was 375. I couldn't understand why this was happening.</p>
<p>I was puzzled about how to remove the horizontal scroll bar, but in the end, I tried dynamically rewriting the meta tag in the HTML as follows:</p>
<pre class="literal-block">var viewPortMeta = $('meta[name="viewport"]');
viewPortMeta.attr('content', "width=" + (window.innerWidth - 1) + ", initial-scale=1");
</pre>
<p>Although I think it's a rather forceful method, it worked. The horizontal scroll bar disappeared.</p>
</div>