android - 媒体查询逻辑

标签 android iphone css responsive-design media-queries

作为“响应式设计”的一种非常简单的方法,我为我正在开发的网站使用了两个版本的 CSS:

  • 应在任何设备上显示的常规(非移动)版本 屏幕宽度大于 700px;
  • 一个精简的移动版本,可以在任何设备上显示 屏幕宽度等于或小于 700 像素。

我使用 @media only screen 和 (max-device-width : 700px) 查询来分隔两组 CSS 规则。

我还使用此 JavaScript fragment 根据屏幕宽度分配视口(viewport)元标记参数:

<script type="text/javascript">

var width = screen.width;
var height = screen.height; 
var meta = document.createElement("meta");
var head = document.getElementsByTagName("head")[0];

if (width >= 700) {
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=1000");
    head.appendChild(meta);
} else if (width <700) {
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width; initial-scale=1; maximum-scale=1");
    head.appendChild(meta);
};

</script>

如果设备的屏幕宽度 >= 700px,脚本会将视口(viewport)的宽度设置为 1000px,本质上是确保非移动版网站的整个宽度适合屏幕,并将初始比例设置为1 如果屏幕宽度小于 700px。

再次说明一下,我想要完成的是:当屏幕宽度 > 700px 时,显示常规(非移动)网站;当屏幕宽度 <= 700px 时,显示流线型(移动)网站。

结果让我吃惊:

  • Samsung Galaxy S (480x800) - 非移动版,横向和 纵向位置
  • Samsung Galaxy S II (480x800) - 非移动版,横向和纵向位置
  • 摩托罗拉 Droid Razr (540x960) - 非移动版,横向和 纵向位置
  • 摩托罗拉 Droid 4 (540x960) - 非移动版,横向和
    纵向位置
  • Motorola Photon 4G (540x960) - 非移动版,横向和 纵向位置
  • Motorola Atrix HD (720x1280) - 移动版 (!),横向和纵向 位置(即使两个屏幕尺寸都比 满足手机查询!)
  • Motorola Razr (540x960) - 手机版,横向和纵向 位置(即使它的横向位置宽度超过 700 像素)
  • HTC Wildfire (240x320) - 非移动版 (!),横向和 纵向位置(即使它有最小的屏幕 尺寸,两者都小于 700 像素!)
  • Sony Xperia X10 (480x854) - 手机版,纵向和横向 位置(即使它的横向位置宽度超过 700 像素)
  • LG Optimus 3D (480x800) - 非移动版,纵向和
    横向位置
  • Amazon Kindle Fire 2 (600x1024) - 手机版,纵向和 景观位置(即使其更宽的尺寸远高于 700 像素)

据我所见,我得出的结论是移动设备一团糟。大多数设备似乎将最高尺寸识别为最大宽度,但某些设备(Amazon Kindle 2)似乎将较低尺寸视为“宽度”,将较高尺寸视为“高度”。一些设备的屏幕尺寸低于 700 像素,但“假装”有更大的尺寸。

当我尝试使用 700 的 max-device-width 作为媒体查询的定义因素时,我似乎使用了错误的逻辑。

问题:使用以下规则创建一个覆盖尽可能多的设备的媒体查询:“如果屏幕的当前宽度 <= 700px,应用移动 CSS”——什么应该是适当的附加条件?

最佳答案

您是否包含了 viewport 元标记?

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

在看到您的viewport 脚本后,我想知道这是否是导致问题的原因

var width = screen.width;

if (width >= 700) {
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=1000");
    head.appendChild(meta);
}

是否将 width 变量设置为超过 700,因为在它查询屏幕宽度时,设备将默认缩放页面?

关于android - 媒体查询逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16610554/

相关文章:

iphone - AVAudioPlayer 没有声音输出

java - 在扩展 RecyclerView.Adapter 时使用装饰器模式是否合适?

android - React native - 从后台服务启动 Activity

iphone - 在 iPad/iPhone 上叠加在 vimeo 电影上不可点击

javascript - Bootstrap 选项卡中的 CSS 阴影和圆 Angular

jquery - 输入字段和 gldatepicker 显示间隙

html - 如何使用css使div在圆形按钮内居中

android - 在 Android 函数中设置 addTextChangedListener

python - 如何组织 Eclipse - Workspace VS 编程语言

iPhone应用程序后台网络通信