Css 元视口标记,允许响应站点在某些屏幕大小上缩放,但在其他屏幕大小上不缩放

Css 元视口标记,允许响应站点在某些屏幕大小上缩放,但在其他屏幕大小上不缩放,css,responsive-design,media-queries,viewport,meta-tags,Css,Responsive Design,Media Queries,Viewport,Meta Tags,我在一个响应性网站上工作,该网站提供三种屏幕宽度范围的媒体查询: 0-767像素移动布局 768-1023像素平板电脑布局 1024像素及以上桌面布局 与每个响应迅速的站点一样,每个布局的设计都非常适合,并且在给定的屏幕大小下清晰可见。例如,移动布局适用于320宽的屏幕 目前,我们使用元视口标记 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale

我在一个响应性网站上工作,该网站提供三种屏幕宽度范围的媒体查询:

0-767像素移动布局 768-1023像素平板电脑布局 1024像素及以上桌面布局 与每个响应迅速的站点一样,每个布局的设计都非常适合,并且在给定的屏幕大小下清晰可见。例如,移动布局适用于320宽的屏幕

目前,我们使用元视口标记

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
这会停止用户使用“按比例缩放”调整大小,并在调整浏览器大小时使不同的布局生效

我们希望改变这种行为,以恢复用户的扩展能力。更重要的是,我们想要改变中间平板的行为,所以我们有:

0-767px-移动布局,如前所述 768-1023px-桌面1024px布局缩小以适应较小的屏幕宽度 1024像素及以上-桌面布局,如前所述 这是为了让销售970x250广告牌的广告商确信他们的广告会被在平板电脑屏幕上查看我们网站的人看到

有人能为这种半响应的需求推荐正确的视口元标记吗?当我删除当前的meta标签时,整个桌面页面布局会缩小,以适合我的iPad屏幕。好吧:但在我的iPhone上,它也会这样做,所以响应速度会降低。另一方面

<meta name="viewport" content="width=device-width">
正如上所述,响应功能再次完全开启,因此iPad显示了平板电脑的布局

我试着删除我的768媒体查询及其所有CSS,但我只是从较小屏幕的媒体查询中获得平板电脑上的移动布局


有什么简单的方法可以做到这一点吗?或者我需要用JS更改viewport meta标记,这样页面在手机上就不会缩小,而是在768?不幸的是,我无法发布我们网站的URL,但我希望人们能理解这一解释。

Hm,我的同事建议我打开和关闭视口缩放的唯一方法是动态添加或删除元标记。他说得对吗?谢谢克里斯蒂娜,这似乎是答案。