元视口标记允许响应式网站在某些屏幕尺寸上缩放,但不允许其他屏幕尺寸

时间:2014-10-24 10:12:07

标签: css responsive-design media-queries viewport meta-tags

我在一个有三个屏幕宽度范围的媒体查询的响应式网站上工作:

  • 0 - 767 px“mobile”layout
  • 768 - 1023 px“平板电脑”布局
  • 1024 px及以上“桌面”布局

与每个响应式网站一样,每个布局都设计得非常合适,并且在给定的屏幕尺寸下清晰易读。因此,移动布局适用于320宽屏幕。

目前我们使用元视口标记

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

停止用户使用双指缩放进行大小调整,并在调整浏览器大小时启用不同的布局。

我们希望更改此行为以恢复用户的扩展能力。更重要的是,我们希望改变中间(“平板”)范围内的行为,因此我们有:

  • 0 - 767px - “移动”布局,如​​前所述
  • 768 - 1023px - “桌面”(1024px)布局按比例缩小以适应较小的屏幕宽度
  • 1024 px及以上 - “桌面”布局,如​​前所述

我们的广告客户可以放心销售970x250广告牌,他们可以在平板电脑纵向屏幕上查看我们网站的人看到他们的广告。

任何人都可以为这种半响应要求建议正确的视口元标记吗?当我删除当前元标记时,整个“桌面”页面布局缩小以适应我的iPad屏幕确定:但是它在我的iPhone上也是如此,因此响应性丢失了。另一方面,用

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

根据CSS Tricks的建议,响应能力再次完全开启,因此iPad显示“平板电脑”布局。

我尝试用我的所有CSS删除我的768媒体查询,但之后我只是通过媒体查询获得平板电脑上的“移动”布局,用于较小的屏幕。

有没有直接的方法来做到这一点?或者我是否需要使用JS更改视口元标记,因此页面在移动设备上不会缩小,但是在768?不幸的是我无法发布我们网站的网址,但我希望人们能理解这个解释。

0 个答案:

没有答案
相关问题