移动端网页布局受浏览器本身导航条的显隐所影响，怎么解决？

Question

问题：在有导航条目的浏览器中，网页滑动，当浏览器导航条显示或者隐藏时，网页整体布局会随着上移或者下移。在没有导航条的浏览器中，比如google或者UC全屏模式，滑动网页并不会出现这种现象。问题图片如下

Answer 1

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 指示IE以目前可用的最高模式显示内容 -->  

    <meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" /><!-- 指示IE使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。 --> 

    <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  

    <meta name="apple-mobile-web-app-title" content=""><!-- 添加到主屏后的标题（iOS 6 新增） -->  

    <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 是否启用 WebApp 全屏模式 -->  

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><!-- 设置状态栏的背景颜色  --> 

    <!-- 只有在 "apple-mobile-web-app-capable" content="yes" 时生效  

        content 参数：  

        default 默认值。  

        black 状态栏背景是黑色。  

        black-translucent 状态栏背景是黑色半透明。  

        设置为 default 或 black ,网页内容从状态栏底部开始。  

        设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 -->

    <!-- apple-touch-icon 图片自动处理成圆角和高光等效果。apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 -->  

    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /><!-- iPhone 和 iTouch，默认 57x57 像素，必须有   -->

    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /><!-- iPad，72x72 像素，可以没有，但推荐有  --> 

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /><!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->  

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /><!-- Retina iPad，144x144 像素，可以没有，推荐大家使用   -->

    <meta name="apple-mobile-web-app-title" content="标题"><!-- title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增） -->  

这段丢上去就完事了！