解決移動端兩端布局的input+fixed的bug

在移動端布局中，會經常出現固定在手機上下兩端的頁面。

但是fixed定位和軟鍵盤碰上之後，會碰到各種的坑，ios和android上都會遇到。

下面就分享一下如何解決此問題，代碼執行個體如下:

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;螞蟻部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"main"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>p</code><code>&gt;可以用手機看看&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>p</code><code>&gt;test&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>p</code><code>&gt;軟鍵盤出來後&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>p</code><code>&gt;foot是否會錯位~&lt;/</code><code>p</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>placeholder</code><code>=</code><code>"我是一個輸入框"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>placeholder</code><code>=</code><code>"用手機點我啊"</code><code>&gt;</code>

<code>  </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"foot"</code><code>&gt;</code>

<code>    </code><code>copyright by linyang</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

原文釋出時間為：2017-2-23

本文作者：admin

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落