Html 移动网站视口精确宽度问题_Html_Mobile_Width_Viewport

Html 移动网站视口精确宽度问题

html mobile

Html 移动网站视口精确宽度问题,html,mobile,width,viewport,Html,Mobile,Width,Viewport,我有一个网站，我正在建设的是700px宽的台式机和手机。在桌面上，700px div居中。在移动设备上，700px div只需填充屏幕即可测试代码如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta name="viewport" content="width=700" />

我有一个网站，我正在建设的是700px宽的台式机和手机。在桌面上，700px div居中。在移动设备上，700px div只需填充屏幕即可

测试代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=700" />
    <style>
        div#wrapper
        {
            width:700px;
            margin-left:auto;
            margin-right:auto;
        }
    </style>
</head>
<body>
    <div id="wrapper">
         <img src="/test.jpg" alt="Test image 700px width in 100px strips" />
    </div>
</body>
</html>


div#wrapper
{
宽度：700px；
左边距：自动；
右边距：自动；
}

这在桌面浏览器和大多数手机上都能正常工作但是，在我女儿的cheapo智能手机上，浏览器会向右放大，只显示大约350px。

我应该如何处理这个问题。你可能会认为这是一个很容易解决的问题，但事实证明并非如此！和其他元标签属性（初始缩放等）混在一起对这个特定的智能手机并没有影响

华为手机浏览器是代理：Modzilla/5.0（Linux；U；Andriod 4.2.2；en gb；华为Y330-U01 Build/HuaweiY330-U01）AppleWebKit/534.30（KHTML，LikegeEcko）版本/4.0 Mobile Safari/534.30

我没有Android设备来验证这一点，但也许这可以通过相对宽度和一个：


div#wrapper
{
宽度：100%；
最大宽度：700px；
左边距：自动；
右边距：自动；
}

max width

在满足条件时会覆盖

width

，因此，像您女儿手机上那样的较小屏幕应该使用全宽，而较大的屏幕只有700像素宽

（为了完整性，我将

type

属性添加到了

标记中。如果没有它，您的代码应该可以呈现得很好。）

试试这个，希望它能解决您的问题

<meta name="viewport" content="width=device-width"/>

而不是

<meta name="viewport" content="width=700" />

我会将您的CSS宽度设置为100%，而不是700px。如果可能，通常最好避免硬编码尺寸。正如另一个答案所建议的，最大宽度可能很有用，因为它在指定时会覆盖宽度。然后，您可以使用screen size media queries（）在大型显示器上的图像周围放置边框div

用这个

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

说明：

视口元素为浏览器提供有关如何控制页面尺寸和缩放的说明

width=devicewidth

部分将页面宽度设置为跟随设备的屏幕宽度（根据设备的不同而有所不同）

initial scale=1.0

部分设置浏览器首次加载页面时的初始缩放级别

下面是一个不带viewport meta标记的网页示例，以及一个带viewport meta标记的网页示例：

演示

阅读此内容-并在标题标签内添加以下链接

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

样式表

<style type="text/css">
@media only screen and (max-width: 699px)//media query for the resolution below 700px {
    div#wrapper
        {
            width:100%;// this will took full width
        }
}
</style>


@仅介质屏幕和（最大宽度：699px）//分辨率低于700px的介质查询{
div#wrapper
{
宽度：100%；//这将占用整个宽度
}
}

不要硬编码图像的宽度使用媒体查询-下面的网站讲述了一些标准尺寸，下一个链接中没有更多特定尺寸的媒体查询。我认为通过将宽度设置为%而不是固定像素宽度，可以解决此问题。但是，在使用媒体查询时，桌面版本的宽度设置有所不同。请提供屏幕截图和url，以便更好地理解

<style type="text/css">
@media only screen and (max-width: 699px)//media query for the resolution below 700px {
    div#wrapper
        {
            width:100%;// this will took full width
        }
}
</style>