Question

我为一些智能手机分辨率设备（460 x 320像素）制作了一个带有表单的html应用程序，它在我的智能手机上看起来很好。当我在我的Android平板电脑上运行它（三星标签3×1024×600像素）时，应用程序的背景图像被平铺/重复。我能够使用background-Repeat:no-repeat;删除重复的背景图像，但现在我剩下的是应用程序底部和右侧的大量空白区域，重复的图像在那里。我不确定这个空白区是什么。是布局视口，还是画布，边距，填充或其他什么？

我想将空白缩小到与表单相同的大小，因为当我重新调整（更大）我未来的平板电脑的智能手机分辨率应用时，我想要一个适用于所有平板电脑尺寸的应用，无论任何更大的分辨率平板电脑它可能会继续运行。下面的页面显示了我的平板电脑上应用程序的外观，但不是黄色空间，而是有空格： https://developer.mozilla.org/it/docs/DOM/element.clientHeight

我尝试过使用CSS，元视口，window.resizeTo和window.resizeBy进行一些设置。另外，我已经阅读了screen.height，outerHeight，outerWidth，offsetWidth，clientHeight和clientWidth，但我不知道这些命令应该放在应用程序的html中，或者即使它们会有任何影响。 Window.resizeTo(320,460)在Safari桌面上有效，但在Chrome桌面上无法使用。 Window.resizeTo对我的Android平板电脑没有任何影响，无论该应用是以html文件形式运行（无论使用哪种浏览器），还是作为.apk运行。

我被告知无法调整移动浏览器/空白区（可能会被调用）的大小，但我拒绝相信它。如果它确实不可能，那么我可以用白色空间做些什么，比如让它变得透明，或者将其改成其他颜色以匹配我的应用程序？或者，还有其他一些我可以尝试的选择吗？

作为一个例子，我的Android平板电脑的股票视频播放器应用程序具有允许它低于全屏的功能。当然应该可以使用html应用程序使用html5，Phonegap，Android API，CSS，webview等来实现这一点，而不是拥有额外的空白区域。请在此处查看示例：http://www.youtube.com/watch?v=2swd06TNYXc

示例表单的html如下所示。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablet Test</title>
<meta name="generator" content="WYSIWYG Web Builder 8 - 

http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width; initial-scale=1.0; 

maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body
{
   font-size: 8px;
   line-height: 1.1875;
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
   background-color: #1E90FF;
   border: 0px #000000 solid;
}
#TextArea1
{
   border: 1px #C0C0C0 solid;
   background-color: #FFFFFF;
   color :#000000;
   font-family: Arial;
   font-size: 13px;
   text-align: left;
}
</style>
</head>
<body>
<div id="wb_Form1" 

style="position:absolute;left:0px;top:0px;width:320px;height:460px;z-in

dex:3;">
<form name="Form1" method="" action="" enctype="text/plain" id="Form1">
<textarea name="TextArea1" id="TextArea1" 

style="position:absolute;left:112px;top:106px;width:98px;height:98px;z-

index:1;" rows="5" cols="11"></textarea>
<button id="AdvancedButton1" type="button" name="" value="" 

style="position:absolute;left:86px;top:364px;width:150px;height:34px;z-

index:2;"><div style="text-align:center"><span 

style="color:#000000;font-family:Arial;font-size:13px">Send</span></div

></button>
</form>
</div>
</body>
</html>

Answer 1

你没有解释你想要什么。删除空格 - 理论上你可以将视口宽度设置为所需的大小，页面将没有“空格”。

例如：

<meta name="viewport" content="width=460,user-scalable=no">

但是这会占用WebView的整个宽度 - 它基于您发布的视频（本机应用程序）而不是您想要的。

如果您使用PhoneGap或其他某种基于WebView的方法来显示它，那么您可以将WebView的背景颜色设置为透明（但这可能会有一些问题，具体取决于您正在开发的Android版本：Android WebView style background-color:transparent ignored on android 2.2）

修改

我在这里提供了一个可用的示例版本：

原稿。示例：http://jsbin.com/orIFUpEq/1/edit

该网站是为固定宽度设计的 - 除非您使用的是WebView，否则使浏览器透明是不可能的。

最好的选择是让您的设计更加灵活。最简单的版本是：http://jsbin.com/UTENavu/4/edit

基本上使身体和html 100％，使身体背景成为蓝色，并将形状置于中间，但删除绝对位置并添加以下CSS：

#wb_Form1
{
    position: relative;
   border: 0px #000000 solid;
    margin: 0 auto;
}

我的猜测是，这是基于以下某种工具生成代码：

<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">

所以这可能需要一些工作才能让它对你的改变感到满意。

无论哪种方式 - 您似乎都在设计一个固定的布局，而且不会在各种设备上运行良好。

Answer 2

我跟一位我认识的当地网站管理员谈过，他告诉我那个

存在的空白量取决于浏览器的方式

编程。与他交谈后，我做了更多研究并学习了

浏览器被编程为具有不同的布局视口

尺寸，取决于它所公布的公司，例如（仅），

Safari浏览器的布局视口可能有1024像素宽，

这就是为什么在

中表单周围存在所有额外的空白区域的原因

浏览器。所以从技术上讲，我想要做的事并非不可能，我只是

必须找到解决方法，因为我不知道如何重新编程

浏览器我的应用将会开启。

如何删除html表单周围的空白区域？

2 个答案: