Question

我有两个不同的css文件，一个用于桌面网站，另一个用于为移动设备和平板电脑提供网站响应。我的问题是，由于某种原因，移动浏览器没有检测到移动css文件来根据屏幕调整网站。我是所有这些事情的新手，仍在学习和挣扎。有人可以帮忙吗？下面是我为测试移动响应而创建的试用页面的主要部分。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>Bandipur Travel| Travel In Bandipur| Bandipur National Park |Easy Destination</title>
<meta name="description" content="Tours and travel in Bandipur. Bandipur National Park Travel Guide, Provides info on Travel in Bandipur. Travel Tips and attractions in Bandipur National Park."/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="motoland/style.css" media="screen" />
<link rel="shortcut icon" href="blog/skins/motoland/favicon.ico" />
<link rel="icon" href="blog/skins/motoland/favicon.ico" />
<SCRIPT type="text/javascript">//btm-pan start js//
//btm-pan end js//</SCRIPT>
<style type="text/css">
<!--
.style1 {font-size: 10}
.style2 {font-size: 18px}
.style3 {color: #FFFFFF}
.style4 {font-size: 20px}
#Layer1 {
position:absolute;
left:297px;
top:1479px;
width:128px;
height:145px;
z-index:1;
}
.style21 {font-size: 14px}
.style22 {font-weight: bold}
.style23 {font-size: 12px}
.style10 {  font-size: 16px;
font-weight: bold;
}
.style7 {font-size: 18px;
font-weight: bold;
}
-->
</style>
<link href="motoland/p7csspbm1_responsive.css" rel="stylesheet" type="text/css" media="all" />
</head>

Answer 1

使用此代码：

＆＃13;

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

＆＃13;

Answer 2

请重新检查您的媒体查询所在的p7csspbm1_responsive.css文件。我没有看到你试图控制正确的html元素的元素。我的意思是说你给了一个带有“content-wrapper”类的元素的宽度自动样式，它不在你的DOM树中。

另外，请确保您拥有正确的元数据

移动浏览器无法检测移动CSS文件

2 个答案: