Question

此标记<meta name="viewport" content="width=device-width; initial-scale=1.0">是否适用于在Android上运行的Web应用程序？或它只是为了iPhone？

这是一段css代码

body 
{
padding:20px;
background-color:#ffffff;
font: normal .80em arial, sans-serif;
 background-color: #FFCC66;
 margin: -10px;
 padding: 0px;
 width:96%;


}

#wrapper
{
width:100%;

}

包装器不会给出任何结果。

Answer 1

是的，适用于Android和iOS。我在下面添加了一些来源，希望对此有所了解。

注意：不要只依赖这个小HTML标签！根据你制作的内容，你可能需要使用一些CSS或Javascript / JQuery。

你的代码有冲突我相信你知道你嵌入的一切都会进入你的身体。这就是为什么我不确定为什么你将保证金设置为-10px，这意味着你嵌入的所有东西都会效仿。此外，正文的默认颜色设置为白色，我再次想知道为什么你添加了两个填充属性。
您声明希望网页适合任何设备。通过以面值查看代码，看起来好像你抓住了点点滴滴并把它放在一起，而不知道它本身。 The World Wide Web Consortium (W3C) Schools页面是学习代码的好地方，因为他们是在万维网上工作的人。

这里有一些CSS，通过让您的页面响应来开始您想要做的事情。

body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    font: normal .80em arial, sans-serif;
}

现在，在以面值查看代码时，我可能错了。但是，如果您在执行Javascript函数时需要响应式布局。我发现使用JQuery和JQuery Mobile非常方便。它节省了大量的时间编码，并且它具有响应性，因此您不需要编写并确保此div具有x填充以匹配IE。有很多API可用于使用JQuery，而JQuery Mobile易于使用。一切都需要学习，所以如果你没有，请检查一下。

这是使用JQuery和JQuery Mobile的一个很好的起始代码。

<!DOCTYPE html>
<html>
<head>
<title>Site Name</title>
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type='text/css'>
/* CSS Here */
</style>
<script type='text/javascript'>
$(function() {
    // JQuery here. If you need help refer to jquery.com
});
</script>
</head>
<body>
<div data-role='page'>
    <div class='header' data-role='header'>
        <h1>Site Name</h1>
    </div>

    <div class='content' data-role='content'>

    </div>
</div>
</body>
</html>

<强>来源：
http://www.w3schools.com/
http://jquery.com/
http://jquerymobile.com/
Using the viewport meta tag to control layout on mobile browsers
Stop using the viewport meta tag (until you know how to use it)

调整网页以适应任何设备

1 个答案: