我的联系表单从智能手机和个人电脑的不同视图

时间:2014-12-26 14:43:44

标签: html css forms smartphone

我有这个问题:我创建了一个联系表单,在我的电脑中,当我调整页面大小时,它正常工作...当我尝试使用Android智能手机时,它的工作原理也适用于Windows手机智能手机它具有不同的边距,页面是rossimelthomas.com/contact.html 代码:

    <form action="php/mail_send.php" method="POST">
    <input autocomplete="off" onfocus="if (this.value=='Name') this.value = ''" onblur="if     (this.value=='') this.value = 'Name'" style="border: solid 1px; border-radius: 5px; height:25px; border-color: white; width: 65%; "  value="Name" type="text" name="name">
    <input autocomplete="off" onfocus="if (this.value=='E-Mail') this.value = ''" onblur="if (this.value=='') this.value = 'E-Mail'" style="margin-top: 20px; border: thin 1px; border-radius: 5px;  height:25px; border-color: white; width: 65%" value="E-Mail" type="email" name="email">
    <input autocomplete="off" onfocus="if (this.value=='Subject') this.value = ''" onblur="if (this.value=='') this.value = 'Subject'" style="margin-top: 20px; border: thin 1px; border-radius: 5px; height:25px;  border-color: white; width: 65%" value="Subject" type="text" name="subject">
    <textarea class="txt_field" style="    color: #99a0aa;margin-top: 20px;  font: normal normal 16px/20px pnova-regular, helvetica, sans-serif; border: thin 1px; border-radius: 5px; border-color: white; width: 65%; height: 300px;" type="text" name="message">Message</textarea>
    <input style="margin-top: 20px; border: thin 1px; border-radius: 10px; border-color: white; cursor:pointer; background-color: #4db849; width:65%; height: 45px; color: white; font-weight: 700;" type="submit" value="Send Message">
    </form>

式:

input {
-webkit-appearance: none; 
-moz-appearance: none; 
border: 2px solid #eee;
color: #99a0aa; font: normal normal 16px/20px pnova-regular, helvetica, sans-serif;
}

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

我无法发送图片,但问题只是一个不同的视图(因为我认为输入的边距为30px,但必须是10px ...我不知道为什么:()< / p>

1 个答案:

答案 0 :(得分:0)

您应该尝试规范化CSS(甚至reset)。它就像在项目中包含一个额外的CSS文件一样简单,它将确保您的网站尽可能兼容brboser。查看this link并记住,只是添加它可能会使您当前的布局变得混乱,因此可能需要进行一些调整才能使其看起来与它相同。

另外,我可以看到你特别向webkit浏览器提供一些功能 - 请注意,Windows Phone的Internet Explorer没有像其他移动浏览器一样使用webikt引擎。