网络应用 - 设备高度/键盘问题 [英] web app - device-height / keyboard issue

问题描述

目前我正在构建一个针对Mobile Safari（iOS7）优化的Web应用程序。我希望我的页面具有100％的视口高度。目前我的页面比视口大，甚至认为我已经在css中指定了高度为100％。

解决这个问题的方法是改变它：

 < meta name =viewportcontent =user-scalable = no，width = device-width，height = device-height，initial -scale = 1.0/> 
  

删除 height = device-height

问题是没有高度元标记，当我触摸/单击输入字段时（当键盘出现时），页面被向上推送。正如我可以选择固定键盘/输入或正确的页面高度:(不理想）。

你们中的任何一个人都遇到过这个问题，并找到了一个解决方案，我找到了解决这个问题的方法，它不是理想的，因为我真的不想避免js设置样式在我的应用程序。但这段jQuery的JavaScript似乎工作：

  $（'。page'）。css（'height '，$（window）.height（）+'px'）; 
  

假设.page是您的整页容器。

hope you are able to help me with this annoying problem.

I'm currently building a web-app optimizied for Mobile Safari (iOS7). I want my page to be 100% height of the viewport. Currently my page is bigger than the viewport even thought I have specified the height in the css to 100%.

The solution to this problem was changing this:

<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0" />

by removing height=device-height

the problem is without the height meta tag, the footer is pushed up on the page when I touch/click an input field (when the keyboard shows up). As is I can choose fixed keyboard/input or correct page height :( Not ideal.

Anyone of you have had this issue, and found a solution where both problems are fixed?

解决方案

I found a way to solve the problem. Its not ideal since I really wan't to avoid js to set styling in my app. But this piece of jquery javascript seems to work:

$('.page').css('height',$(window).height()+'px');

Assuming ".page" is your full-page container.

这篇关于网络应用 - 设备高度/键盘问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！