停止响应式设计在桌面上触发

Posted 2023-02-19

【中文标题】停止响应式设计在桌面上触发

【英文标题】：Stop responsive design from triggering on desktop

【发布时间】：2017-03-06 01:46:29

【问题描述】：

请查看此网站 digikala.com，并请告诉我为什么当您在桌面上调整浏览器窗口大小时它没有响应，而当您在手机上时它完全响应。我注意到 Google.com 的功能也一样；当您使用手机时，您会看到移动设计，而您无法通过调整桌面浏览器的大小来查看移动设计。

谢谢

【问题讨论】：

这是另一个具有类似行为的网站：tennisworldusa.org

【参考方案1】：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

您需要将此代码添加到 head 标签中。它将为响应式工作。使用媒体查询

/* Tablet Landscape */

@media screen and (max-width: 1060px) 
    #primary  width:67%; 
    #secondary  width:30%; margin-left:3%;  


/* Tabled Portrait */

@media screen and (max-width: 768px) 
    #primary  width:100%; 
    #secondary  width:100%; margin:0; border:none; 

【参考方案2】：

由于响应式元标记在头部添加此元标记

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

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review