Fatal编程技术网
  • javascript/
  • Javascript 如何删除html表单周围的空白？

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

javascript css html

Javascript 如何删除html表单周围的空白？,javascript,css,html,Javascript,Css,Html,我为一些智能手机分辨率设备（460 x 320像素）制作了一个带有表单的html应用程序，它在我的智能手机上看起来很好。当我在我的Android平板电脑（三星Tab 3-1024x600像素）上运行它时，应用程序的背景图像被平铺/重复。我可以使用backgroundrepeat:no Repeat删除重复的背景图像，但现在我看到的是在应用程序的底部和右侧有很多空白，重复的图像就在那里。我不确定这个空白是什么。是布局视口，还是画布、边距、填充，还是其他什么 我希望将空白区域缩小到与表单相同的大小，

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

我希望将空白区域缩小到与表单相同的大小，因为当我重新调整（更大）我未来的智能手机平板电脑分辨率应用程序的大小时，我希望所有平板电脑大小都有一个应用程序，而不管它可能运行在任何更大分辨率的平板电脑上。下面的页面显示了应用程序在我的平板电脑上的外观，但不是黄色空间，而是白色空间：


我尝试了CSS、元视口、window.resizeTo和window.resizeBy的一些设置。另外，我已经在screen.height、outerHeight、outerWidth、offsetWidth、clientHeight和clientWidth上读过了，但我不知道这些命令在应用程序的html中应该放在哪里，甚至不知道它们是否会有任何影响<代码>窗口。resizeTo（320460）
在Safari桌面上工作，但在Chrome桌面上不工作
Window.resizeTo
对我的Android平板电脑没有任何影响，无论该应用程序是作为html文件（无论使用哪个浏览器）还是.apk运行

有人告诉我，调整手机浏览器/空白区的大小是不可能的，但我拒绝相信这一点。如果真的不可能，我还能用空白做些什么，比如让它透明，或者把它改成其他颜色来匹配我的应用程序吗？或者，我可以尝试其他选择吗

举个例子，我的Android平板电脑的股票视频播放器应用程序有一个功能，允许它不到全屏。当然，使用html5、Phonegap、Android API、CSS、webview等的html应用程序应该可以做到这一点，而不是使用额外的空白。请参见此处的示例：

下面是示例表单的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>


片剂试验
身体
{
字号：8px；
线高：1.1875；
背景色：#FFFFFF；
颜色：#000000；
}
A.
{
颜色：#0000FF；
文字装饰：下划线；
}
a:参观了
{
颜色：#800080；
}
a:主动的
{
颜色：#FF0000；
}
a:悬停
{
颜色：#0000FF；
文字装饰：下划线；
}
#wb_表格1
{
背景色：#1E90FF；
边框：0px#000000实心；
}
#文本区域1
{
边框：1px#c0实心；
背景色：#FFFFFF；
颜色：#000000；
字体系列：Arial；
字体大小：13px；
文本对齐：左对齐；
}
发送
你没有解释你到底想要什么。删除空白-理论上，您可以将视口宽度设置为所需大小，页面将没有“空白”

例如：

<meta name="viewport" content="width=460,user-scalable=no">
我猜这是从某种工具生成代码，基于：

<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">
因此，这可能需要一些工作才能使它对您的更改感到满意

不管是哪种方式，你似乎在设计一个固定的布局，这在不同的设备上都不会很好地工作。

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

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

编程的。在和他交谈之后，我做了更多的研究和学习

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

尺寸，取决于生产公司，例如（仅限）

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

这就是为什么在表单周围会有额外的空白

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

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

浏览器我的应用程序将打开。

对于这样的问题，似乎有过多的文本。请尽量精简您的问题或至少一个tl；dr=P@Gunt Face，谢谢你的链接，我必须研究和测试里面有什么。如果您在桌面浏览器或7英寸以上的平板电脑浏览器中打开我上面提供的html，您将在表单的右侧和底部看到大量额外/不需要的空白。我想对空白区做的是将其删除/使其透明/或将其缩小到窗体的大小，这样只有窗体保持可见。这些选项中必须有一个是可能的。@Gunt Face，谢谢你的例子，更重要的是，谢谢你的时间。既然我是这里的新手，我不能给你投票。我也研究了如何实现Webview，以得到我想要的，但我想首先看看是否有一些CSS HTML Javascript方法可以做到这一点。我现在将使用Webview选项来做我想做的事情。 
<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">