Javascript 使文本在移动设备上可见，在桌面上不可见

我有一个用于项目图像、标题和描述的简单框。在桌面上，我有一些jquery，可以在鼠标输入时显示项目描述。在手机上，我希望它只是一块始终可见的文本。到目前为止，我尝试的只是“取消”移动设备上的javascript，但这会使描述在调整显示大小之前始终不可见

如何将

.text容器（描述框）更改为在移动设备上始终可见，但在桌面上保持鼠标行为

这是我的密码：


$（文档）.ready（函数（）{
//与style_projects.css中的媒体查询中的移动屏幕宽度检查一致
var-smallScreenWidth=480；
$（“.projectbox”）.mouseenter(
函数（）{
如果（$（窗口）.width（）>smallScreenWidth）
$（“#”+this.id+“.text container”）.css（“可见性”、“可见”）；
}
);
$（“.projectbox”）.mouseleave(
函数（）{
如果（$（窗口）.width（）>smallScreenWidth）
$（“#”+this.id+“.text container”）.css（“可见性”、“隐藏”）；
}
);
});  
正文
{
字体系列：佐治亚，衬线；
}
.projectbox
{
背景颜色：绿黄色；
宽度：240px；
高度：181px；
光标：指针；
边缘底部：50px；
左边距：自动；
右边距：自动；
}
.projectbox-img
{
高度：160px；
宽度：240px；
位置：绝对位置；
}
.文本容器
{
背景色：rgba（50,50,50,0.5）；
位置：绝对位置；
可见性：隐藏；
高度：160px；
宽度：240px；
填充：10px 10px 10px 10px；
}
@仅介质屏幕和（最大设备宽度：480px）
{
.文本容器
{
能见度：可见；
}
}
.标题栏
{
背景色：红色；
填充：10px 10px 10px 10px；
宽度：100%；
高度：40px；
}

项目1

这是一个示例项目描述。描述得不错，但很短。

您是否尝试使用
最大宽度
而不是
最大设备宽度

@仅媒体屏幕和（最大宽度：480px）

如果您正在笔记本电脑上调试该问题，最好使用
max width
，因为您可能无法在设备上看到实际的css结果



最大宽度是目标显示区域的宽度，例如浏览器
最大设备宽度是设备整个渲染区域的宽度，即实际设备屏幕的宽度

如果您使用的是最大设备宽度，当您更改桌面上浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置；
如果您使用的是最大宽度，当您更改桌面上浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到手机的样式，例如触摸友好菜单。
您是否尝试过使用
max width
而不是
max device width

@仅媒体屏幕和（最大宽度：480px）

如果您正在笔记本电脑上调试该问题，最好使用
max width
，因为您可能无法在设备上看到实际的css结果



最大宽度是目标显示区域的宽度，例如浏览器
最大设备宽度是设备整个渲染区域的宽度，即实际设备屏幕的宽度

如果您使用的是最大设备宽度，当您更改桌面上浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置；
如果您使用的是“最大宽度”，当您更改桌面上浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到手机的样式，例如触摸友好菜单。
您只需提供可见性：可见！重要的在您的媒体查询css中。
您只需提供可见性：可见！重要的在您的媒体查询css中。
我想您希望这样：


$（文档）.ready（函数（）{
//与style_projects.css中的媒体查询中的移动屏幕宽度检查一致
var-smallScreenWidth=480；
$（“.projectbox”）.mouseenter(
函数（）{
如果（$（窗口）.width（）>smallScreenWidth）
$（“#”+this.id+“.text container”）.css（“可见性”、“可见”）；
if（$（窗口）.width（）smallScreenWidth）
$（“#”+this.id+“.text container”）.css（“可见性”、“隐藏”）；
if（$（窗口）.width（）
正文
{
字体系列：佐治亚，衬线；
}
.projectbox
{
背景颜色：绿黄色；
宽度：240px；
高度：181px；
光标：指针；
边缘底部：50px；
左边距：自动；
右边距：自动；
}
.projectbox-img
{
高度：160px；
宽度：240px；
位置：绝对位置；
}
.文本容器
{
背景色：rgba（50,50,50,0.5）；
位置：绝对位置；
可见性：隐藏；
高度：160px；
宽度：240px；
填充：10px 10px 10px 10px；
}
.移动文本容器
{
背景色：rgba（50,50,50,0.5）；
位置：绝对位置；
可见性：隐藏；
高度：160px；
宽度：240px；
填充：10px 10px 10px 10px；
}
@仅介质屏幕和（最大设备宽度：480px）
{
.文本容器
{
能见度：可见；
}
}
.标题栏
{
背景色：红色；
衬垫：
<div class="projectbox" id="project1">
    <div class="titlebox">Project1</div>
    <div class="block">
            <img src="yourimage.jpg">
            <p class="text-container">This is a sample project description. It's not a bad description, but it's short.</p>
    </div>
</div>

body {
    font-family: Georgia, serif;
}
.projectbox
{
    background-color: greenyellow;
    width: 240px;
    height: 181px;
    cursor: pointer;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}
.projectbox img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.text-container {
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 160px;
    width: 100%;
    margin: 0;
    z-index: 999;       
    padding: 10px;
    margin-top: 20px;
    opacity: 0;
    transition: all ease .3s;
}
.projectbox .block {
    position: relative;
    overflow: hidden;
}
.projectbox .block:hover .text-container {
    margin-top: 0px;
    opacity: 1;
}
.titlebox {
    background-color: red;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}
@media only screen and (max-device-width: 480px)
{
    .text-container {
        opacity: 1;
        margin: 0;
    }
}