Tag: 媒体查询

未调用Safari的window.matchMedia处理程序: 发生afterPrint时，我需要执行doSomethingFunc 。我的代码在所有浏览器上工作正常，除了当前的Safari版本（OSX上的Safari 10.1和iOS 10.3上的Safari浏览器）。看来，事件监听器（至less对于打印）不被称为这两个浏览器。 const mediaQueryPrint = window.matchMedia('print'); mediaQueryPrint.addListener((mql) => { if (!mql.matches) { setImmediate(doSomethingFunc); } }); window.print(); 上面的代码完全适用于OSX Safari 9.1.2和iOS 10.2的Safari。但不是与当前的版本。有人注意到类似的东西吗？或者我必须改进我的代码为当前的Safari版本？我的猜测是，这是一个Safari错误，因为在Safari 10.1 更改日志章节Accessability中有相应的注释。

iOS / iPhone：Web应用程序启animation面不显示: 我在我的web应用程序的<head>中有下面的代码，但是当DOM加载而不是闪屏时，我的iPhone 3GS上只是白屏。 <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!–STYLES–> <!–SCRIPTS–> <!– iPhone LAUNCHSCREEN–> <link href="includes/images/apple-launch-480h.png" sizes="320×480" media="(device-height: 480px)" rel="apple-touch-startup-image"> <!– iPhone (Retina) LAUNCHSCREEN–> <link href="includes/images/apple-launch-480h2X.png" sizes="640×920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!– iPhone 5+ LAUNCHSCREEN–> <link href="includes/images/apple-launch-568h.png" sizes="640×1136" media="(device-height: 568px)" rel="apple-touch-startup-image"> 如何让我的启animation面在所有版本的iPhone上正确显示？代码没有显示，但我的networking应用程序图标正在工作时，添加到主页。我正在使用jQuery Mobile来构build这个Web应用程序。我也确认，PNG图像是正确的大小，我已经删除了networking应用程序图标，刷新，并重新添加到主屏幕多次。我在StackOverflowfind的解决scheme都没有为我工作。我还没有尝试JavaScript解决scheme，因为我确定有一个纯粹的CSS解决scheme。

媒体查询不适用于iPhone和iPad: 在iPhone 5和iPad 4 OS的情况下@media查询不起作用。我已经使用下面的CSS为每个操作系统和设备造型为不同的屏幕。我明确地检查了我的iPad和iPhone的宽度和高度，并基于这一点，我只保留了媒体查询。这在ANDROID OS上工作正常。 /*@media print {*/ /* iPhone 5 (Portrait) */ @media screen and (max-device-height: 568px) and (orientation: portrait) { #map_canvas { border: 1px dashed #C0C0C0; width: 290px; height: 473px; } } /* iPad 4 (Portrait) */ @media screen and (max-device-height: 1024px) and (orientation: portrait) { #map_canvas { border: […]

iPhone上的Safari有没有等同于Android的<meta name ='viewport'content ='target-densitydpi = device-dpi'>？: 在设置meta name='viewport' content='target-densitydpi=device-dpi' ，Android浏览器和Opera Mobile会将CSS像素作为设备上的设备像素使用，而我的样式表不受干扰。在iPhone上的Safari中是否有任何等效的function？在我的移动友好，高DPI优化，媒体查询驱动的Web应用程序，我真的很感激，如果浏览器离开我的样式表单独。（我的完整视口声明如下所示： meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no; target-densitydpi=device-dpi' ）

iPhone 6和6 Plus响应式断点: 根据苹果的网站： iPhone 6的分辨率为1334×750像素，分辨率为326 ppi，对比度为1400：1（典型值） iPhone 6+的分辨率为1920 x 1080，分辨率为1920 ppi，对比度为1300：1（典型值）但是，CSS媒体查询响应断点是什么？（肖像和风景）我不完全了解如何使用各种响应模拟器testing视网膜屏幕尺寸。任何帮助将非常感激。