html - 从智能手机和个人电脑查看我的联系表的不同 View

Question

我遇到了这个问题:我创建了一个联系表单，在我的电脑上它也能正常工作 当我调整页面大小时...当我尝试使用 Android 智能手机时它也能正常工作但是对于 Windows Phone 智能手机它有不同的边距, 页面是 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;
}

我无法发送图像，但问题只是不同的 View (因为我认为输入有 30px 的边距，但它必须是 10px...我不知道为什么 :( )

Answer 1

您应该尝试规范化 css(甚至 reset 它)。就像在您的元素中添加一个额外的 CSS 文件一样简单，它会确保您的网站尽可能与浏览器兼容。查看this link请记住，仅添加它可能会使您当前的布局有点困惑，因此可能需要进行一些调整才能使其看起来与实际布局相同。

此外，我还看到您特别针对 webkit 浏览器介绍了一些功能 - 请注意，Windows Phone 的 Internet Explorer 不像其他移动浏览器那样使用 webikt 引擎。