Responsive design CSS媒体查询不适用于手机或平板电脑

Responsive design CSS媒体查询不适用于手机或平板电脑,responsive-design,media-queries,mobile-website,Responsive Design,Media Queries,Mobile Website,我刚刚用1和1将我的网站上传到托管服务器上。我遇到的问题是,我似乎无法找到为什么我设置的媒体查询规则现在不起作用/被忽略 我已经在iPhone5上进行了测试,但我的网站并没有达到应有的规模。不过,当我将桌面上的浏览器(谷歌浏览器)调整为平板电脑和手机大小时,它确实可以正确缩放 是否有任何原因可以解释为什么当我调整浏览器大小时,它工作得很好,但当我在移动设备上测试它时,它不能正常工作/缩放 为了获得更多信息,我使用wordpress,并通过functions.php文件以正确的方式包含css文件

我刚刚用1和1将我的网站上传到托管服务器上。我遇到的问题是,我似乎无法找到为什么我设置的媒体查询规则现在不起作用/被忽略

我已经在iPhone5上进行了测试,但我的网站并没有达到应有的规模。不过,当我将桌面上的浏览器(谷歌浏览器)调整为平板电脑和手机大小时,它确实可以正确缩放

是否有任何原因可以解释为什么当我调整浏览器大小时,它工作得很好,但当我在移动设备上测试它时,它不能正常工作/缩放

为了获得更多信息,我使用wordpress,并通过functions.php文件以正确的方式包含css文件

我的网站是www.jamieclague.com,请随意查看源代码

谢谢你的帮助,非常感谢

header.php

<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
更新

一些建议

如果您使用web inspector,您将看到许多404,包括



第113行的jQuery错误
$不是一个函数。(在“$(文档)”中,“$”未定义)

作为一个起点,最好解决这些问题

另外,如果我看一下,我不确定从第1813行开始的语句是否有一个右尖括号

@media only screen and (max-width:993px){  
...
您需要在文档的头部添加一个viewport meta标记,否则移动设备的默认行为将是缩放页面以适应屏幕

下面的内容将帮助您开始

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

...
...
了解有关可使用的设置的更多信息:

祝你好运

更新

一些建议

如果您使用web inspector,您将看到许多404,包括



第113行的jQuery错误
$不是一个函数。(在“$(文档)”中,“$”未定义)

作为一个起点,最好解决这些问题

另外,如果我看一下,我不确定从第1813行开始的语句是否有一个右尖括号

@media only screen and (max-width:993px){  
...
您需要在文档的头部添加一个viewport meta标记,否则移动设备的默认行为将是缩放页面以适应屏幕

下面的内容将帮助您开始

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

...
...
了解有关可使用的设置的更多信息:


祝你好运

你试过用最大/最小宽度替换最大/最小设备宽度吗?是的,我试过了,事实上我一开始就是这么做的。实际上,当我使用“最大/最小宽度”时,它在浏览器中可以正确缩放,但在设备上不能。但当我使用最大/最小设备宽度时,它不能在浏览器或设备上正确缩放。。。我肯定我少了一些小东西。你能描述一下它是怎么不起作用的吗?以iphone5为例,它的宽度为320px。这些样式是使用不同的断点样式还是根本不起作用?我在iOS模拟器上检查了您的页面,马上我看到一个
ul
(nav)的设置宽度为700px+,它肯定会打断您的页面。请确保从我所看到的情况来看,您的样式没有使用任何媒体查询样式。例如,当宽度为640px或更小时,应隐藏主桌面/平板电脑导航,并应显示新的下拉导航菜单。同样,当我在iPhone5上使用时,它无法正常工作/渲染。请随意在我的网站上调整浏览器的大小,以查看其外观,并在移动设备上试用,以查看其渲染效果如何。您是否尝试过将最大/最小设备宽度替换为最大/最小宽度?是的,事实上,我一开始就有。实际上,当我使用“最大/最小宽度”时,它在浏览器中可以正确缩放,但在设备上不能。但当我使用最大/最小设备宽度时,它不能在浏览器或设备上正确缩放。。。我肯定我少了一些小东西。你能描述一下它是怎么不起作用的吗?以iphone5为例,它的宽度为320px。这些样式是使用不同的断点样式还是根本不起作用?我在iOS模拟器上检查了您的页面,马上我看到一个
ul
(nav)的设置宽度为700px+,它肯定会打断您的页面。请确保从我所看到的情况来看,您的样式没有使用任何媒体查询样式。例如,当宽度为640px或更小时,应隐藏主桌面/平板电脑导航,并应显示新的下拉导航菜单。同样,当我在iPhone5上使用时,它无法正常工作/渲染。请随意在我的网站上调整浏览器的大小,看看它应该是什么样子,并在手机上试用,看看它如何不正确呈现谢谢你的评论,但正如你从我的原始帖子中看到的,我的header.php文件中包含了viewport meta标记谢谢你的评论,但正如你从我的原始帖子中看到的,我有myheader.php文件中包含的视口元标记