我对响应式网站很新,虽然我之前已经构建了一些响应式网站,但由于某种原因,我遇到了当前网站的问题。在笔记本电脑或台式机上查看时,在调整浏览器大小时,断点可以正常工作,但是在移动设备上查看时,它只会加载完整大小并将其调整到屏幕宽度,而忽略了媒体特定的样式表。正如我所说,我过去曾使用过这种方法而没有任何问题所以我希望有人可以指出我正确的方向。我在论坛上看到了类似的问题,但对所提供的解决方案没有任何好运。
我正在处理的网址是www.evolvecollaboration.com/test/index.html,我的代码如下。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="_css/myer_reset.css">
<link rel="stylesheet" type="text/css" href="_css/structure.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="_css/structure_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="_css/structure_mobile.css" />
答案 0 :(得分:0)
尝试使用这些尺寸。我将它们用于我的媒体查询。
<强>电话:强> 只有屏幕和(最小设备宽度:320px)和(最大设备宽度:480px)
<强>平板:强> 只有屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px)
<强>视网膜:强> 只有屏幕和(-webkit-min-device-pixel-ratio:1.5)