0

此标签是否<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%;

}

包装器没有给出任何结果。

4

1 回答 1

0

是的，它适用于 Android 和 iOS。我在下面添加了一些资源，供那些想要更好地理解这一点的人使用。

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

你有冲突的代码。
我相信你知道你嵌入的所有东西都会进入你的身体。这就是为什么我不确定为什么您将边距设置为 -10px，这意味着您嵌入的所有内容都会效仿。此外，主体的默认颜色设置为白色，我再次想知道为什么您添加了两个填充属性。
您声明您希望网页适合任何设备。通过从表面上看你的代码，它看起来好像你在不知道它本身的情况下抓取一些零碎的东西并将它们放在一起。万维网联盟 (W3C) 学校页面是学习代码的好地方，因为他们是在万维网上工作的人。

这里有一些 CSS 可以让你通过让页面响应式来开始你想要做的事情。

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

现在，当我从表面上看你的代码时，我之前所说的可能是错误的。但是，如果您在执行 Javascript 功能时想要响应式布局。我发现使用JQuery和JQuery Mobile非常方便。它节省了大量的编码时间，并且它是为响应而构建的，因此您无需编写并确保此 div 具有与 IE 匹配的 x 填充。有大量可用的 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/
使用视口元标记来控制移动浏览器上的布局
停止使用视口元标记（直到您知道如何使用它）

于 2013-09-18T09:58:20.553 回答