浏览器忽略meta name ="viewport"(？)
Cha*_*ant 7 html css responsive-design
以前在<HEAD>它
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
你可以在下面附上的screenShots中看到问题..有UI中断的问题所以我<HEAD>用以下代码更新了
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=0.9; maximum-scale=0.9; minimum-scale=0.9;" />
但仍存在问题
网页适用于1280 X 800的分辨率,因为您可以查看此图像
这3列(黑色垂直线分开)是<td>
px中具有固定宽度的容器的内部,由于某些限制,我无法将其更改为%.只有主要容器有宽度:100%,(主要容器:所有页面内容后面的整页宽度 - 白色BG)
我附加了屏幕分辨率问题的屏幕截图
在1024 X 768上
正如您所见,在浏览器上,比率为1024 X 768 "移动图像"超越白盒(主容器)
在1920 X 1080
这里的浏览器比例是1920 X 1080,主容器(白盒子)是宽度的100%但是这三列(<TD>)不是,所有三个宽度都与之前的图像保持一致,主容器是100%
问题不在于您的meta视口标记.阅读完所有评论后,您可以找到解决问题的方法:
非最佳解决方案:
保持桌面布局,改为百分比宽度和使用文本块与white-space:nowrap;和<br>硬编码符合根据设备屏幕大小不同的字体大小打破.
- 关于布局:
你.preview-panel有一个固定的宽度rem.要解决此问题,请进行以下更改:
.preview-panel {
background-size:100% auto;
width:100%;
}
现在您将注意到另一个的布局问题td.那是因为你必须将它们设置为百分比宽度,例如:
.template-editor {
width:100%;
}
.template-editor td {
width:33%;
}
- 关于文本块:
你说设置宽度为百分比会弄乱你的文本块.好吧,遗憾的是,没有神奇的解决方案可以解决这个问题(你当前的布局)是将它添加到你放在那里的任何文本块中:
.foo {
white-space:nowrap;
}
您还必须修复您的换行符,<br>如下所示:
Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit.<br>
Fusce pulvinar aliquet luctus.
如果您愿意,可以使用(HTML)之类的内容使换行响应:
<span class="line-break"></span>
(CSS):
.line-break {
display:block;
}
然后,您将有机会在媒体查询中设置不同的字体大小,并且还可以隐藏有目的的换行符display:none;.在我看来,这比普通的旧解决方案更好<br>.
有了这个,您的布局应该在所有设备中看起来更好.话虽这么说,这仍然是一个糟糕的解决方案,在我看来,完全不同的方法是必要的.
更好的解决方案:
使用flex或者可能只是浮动的项目,但不是table当您的布局本质上不是表格时.你有三个面板,为什么你会强行使用表格布局呢？这是flex的一个例子:
.container {
display:flex;
align-items:stretch;
justify-content:center;
}
.container__panel {
flex-grow:1;
height:600px;
border:1px solid black;
}<div class="container">
<div class="container__panel"></div>
<div class="container__panel"></div>
<div class="container__panel"></div>
</div>免责声明:奇怪的container__panel是BEM表示法:http://getbem.com/introduction/