Question

我在移动设备上打开我的网站时遇到问题，但只是在我更改笔记本电脑Chrome浏览器窗口的大小时，它才有效。

＆＃13;

    
    @media screen {
    body{ 
    background-image: url(background.jpg);
    background-color: #FFFFFF;
    color:darkgray;
    font-family:  Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

    @media screen and (max-width: 480px) {
    body{ 
    background-color: pink;
    color:black;
    font-family:  Arial, "Helvetica Neue", Helvetica, sans-serif; 
    }

＆＃13;

    <html lang="en">
    <head>
     <link rel="stylesheet" href="pac.css" media="screen" >
    <link media= "screen and (max-width: 480px)"  href="pac.css" rel="stylesheet">
    </head>
    
    </html>

＆＃13;

也许有人知道它可能是什么，为什么它不适用于移动设备。

Answer 1

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

尝试一次。

Answer 2

可能您忘记添加视口元标记，在您的头部添加以下元标记

<meta name="viewport" content="width=device-width">

移动版网站无法在手机上显示（HTML＆amp; CSS）

2 个答案: