我正在寻找一个可靠的媒体查询规则:
If desktop width < 720px AND devices in portrait mode {}
(也就是说，随着桌面宽度的减小，媒体查询开始于 720px。在手机上，这应该只发生在纵向模式下 - 横向不应该应用媒体查询)
问题是:如何将设备与桌面分开。
存在问题是因为:@media handheld 不受支持
另外 max-width 影响一切，所以它不能与 max-device-width AND portrait 一起使用。
似乎我只能定位其中一个:
不能分开处理设备和桌面。
是否有现有的 JavaScript 解决方案可以满足我的需求？
注意我正在用 LESS 编写我的 CSS，媒体查询嵌套在其中。
背景
我工作的网站是响应式的并且使用了网格系统。在 720 像素宽度(当前测试宽度)下，较小设备/分辨率的列使用发生变化。然而，经过测试，该站点(整个站点的宽度为 720 像素)在横向模式下可读性很好，即使在我的小屏幕 HTC Desire 上也是如此。由于我正在删除网站的某些部分以提高媒体查询的可用性，所以我想为什么不让该网站通常可以横向访问。
在不修改元素列跨度的情况下，桌面上的波纹管 720px 会看到一个非常 splinter 的网站。但是，由于移动设备的体积较小，因此看起来并非如此。然而，随着列跨度的修改，特定元素在手机横向时只是不成比例(例如标题)(由于浏览器的高度大大降低)。
简单地说，纯粹根据浏览器宽度更改设计并不能平等地跨所有设备，正如我在其他网站上设法实现的那样。
我正在使用以下元标记:
<meta name="viewport" content="width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=no" />
尝试了什么
方向与桌面无关。它会根据用户窗口设置、分辨率等而变化。
我尝试了以下方法来定位手机/两者:
@media handheld and (orientation:portrait) { }
似乎没有手机利用 handheld 属性，至少 100% 没有 - 所以它毫无值(value)。
@media screen and (max-device-width:720px) and (orientation:portrait) { }
会很好用，但是 android 2.2 和 2.3(可能是其他的，更不用说其他操作系统了？)有 max-device-width 不工作的问题。
@media screen and (max-width:720px) and (orientation:portrait) { }
适用于高分辨率显示器(因为当您减小窗口宽度时高度会迅速变为 > 宽度)和手机，但不适用于较小的显示器，因为窗口在 720px 宽度时不会是纵向的(网站不断压缩超过我的限制)想要)。
@media screen and (max-width:720px), screen and (orientation:portrait) { }
先到先得。没用。
@media screen and (max-width:720px), screen and (max-width:500px) and (orientation:portrait) { }
和
@media screen and (max-width:720px) { }
@media screen and (max-width:500px) and (orientation:portrait) { }
一切都只是使用更大的 max-width。
我也对 min/max-height 进行了摆弄，但也没有成功。
最佳答案
我认为最好的方法是，根据 MDN(Mozilla 开发者网络)使用 window.innerHeight 文档 here和 window.innerWidth 文档 here它以像素为单位测量浏览器的宽度和高度以确定方向。
//Detect mobile platform
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if ( isMobile.any() ) {
if (window.innerHeight > window.innerWidth) {
console.log("Orientation is in portrait");
}
else {
console.log("Orientation is in landscape");
}
}
else {
console.log("Mobile platform not detected.");
};
此处有更多关于 mobile 的文档平台。
关于javascript - 区分手持设备和台式机上的纵向模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13430651/
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。 最佳答案 我最
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl
Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？ 最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我经常迷上ruby的一件事是递归模式。例如，假设我有一个数组，它可能包含无限深度的数组作为元素。所以，例如:my_array=[1,[2,3,[4,5,[6,7]]]]我想创建一个方法，可以将数组展平为[1,2,3,4,5,6,7]。我知道.flatten可以完成这项工作，但这个问题是作为我经常遇到的递归问题的一个例子-因此我试图找到一个更可重用的解决方案。简而言之-我猜这种事情有一个标准模式，但我想不出任何特别优雅的东西。任何想法表示赞赏 最佳答案 递归是一种方法，它不依赖于语言。您在编写算法时要考虑两种情况:再次调用函数的情
这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo