Question

我正在制作这个网站＆amp;我为手机，平板电脑，笔记本电脑，台式机制作了媒体设置。在所有其他手机中看起来都不错。我没有＆＃39;在实际的平板电脑上检查过，但它在Chrome浏览器模拟器上很好。

但是，我的朋友在他的Iphone6 Plus中检查了该网站，并且导航栏设置搞砸了。顺便说一下，我使用Bootstrap 3作为框架。

我很困惑为什么我的代码在其他手机上工作但在Iphone6 Plus上没有。也许甚至Iphone6都有同样的问题？

这是我的媒体广告：

    /* Tablet (Portrait) */
@media only screen and (max-width : 768px) and (orientation: portrait) {
}
/* Phones (Portrait) */ 
@media only screen and (max-width : 480px) and (orientation: portrait) {
}
/* Phones (Landscape) */ 
@media only screen and (max-width : 480px) and (orientation: landscape){
}
/* Tablet (Landscape)*/
@media only screen and (max-width :1100px) and (orientation: landscape) {
}
/* Medium Devices, Desktops and tablet landscape*/
@media only screen and (min-width : 992px) {
}
/* Large Screens, Large Desktops */
@media only screen and (min-width : 1601px) {
}

我已经在网上查了一下像素密度＆amp; Iphone6 Plus的分辨率完全不同。我们从这里尝试了解决方案：iPhone 6 and 6 Plus Media Queries

到目前为止，即使这些查询也没有解决我们的问题。好像没有变化。我希望这个问题能够迅速解决，感谢您的帮助。

Answer 1

一切都归结为设备像素比率，曾经是iphone的2倍。新款iphone 6 plus具有3倍视网膜显示器

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

此外，来自CSS |的文章MDN可以添加更多浏览器支持和回退。

link：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

#!C:\Perl64\bin\perl.exe -w
### Variablendeklarationen und Moduleinbindungen ###
use strict;

use CGI qw(:standard);
use CGI::Carp qw(fatalsToBrowser);
use DBI;
my $DBH = DBI->connect('DBI:CSV:');
my $STH;
use CGI::Carp 'fatalsToBrowser';

### Statement-Vorbereitung ###
$DBH->{'csv_tables'}->{'daten'} = { 'file' => 'daten.csv'}
    or die "Konnte Datenbank nicht oeffnen:$!";
$STH = $DBH->prepare("SELECT * FROM daten")
    or die "Konnte SQL-Statement nicht ausfuehren:$!";

$STH->execute()
    or die "Ausfuehren der Datenbankabfrage nicht moeglich:$!";

print <<HERE_TEXT;
Content-type:text/html

<html>
<head>
<title>Datenanzeige CSV-File</title>
</head>

<body>
<center>
<h1>Folgende Umsatzdaten sind ausgelesen worden:</h1>
<hr>
<table border>
<tr>
    <td width="200"><b>Filiale:</b></td>
    <td width="100"><b>Leiter:</b></td>
    <td width="200"><b>Mitarbeiter:</b></td>
    <td width="100"><b>Umsatz:</b></td>
</tr>

HERE_TEXT

my @data;
my @diagarray;

while (@data = $STH->fetchrow_array()) {
    my $filiale = $data[0];
    my $leiter = $data[1];
    my $mitarbeiter = $data[2];
    my $umsatz = $data[3];

push (@diagarray, $umsatz);
print qq§<tr>\n<td><b>$filiale</b></td>\n<td>$leiter</td>\n<td>$mitarbeiter</td>\n<td>$umsatz</td>\n</tr>\n§;
}
print ("<br><br>");

use GD::Graph::pie;
my $graph = GD::Graph::pie->new(300, 300);

    $graph->set(
    title => 'Umsatzverteilung Filialen',
    ) or die $graph->error;

#my @diagram = (\@data,\@diagarray);

#Debug
#my $diagram;
#   foreach $diagram(@diagram)
#       {
#           print ("$diagram\n");
#       }

my $gd = $graph->plot(\@diagarray) or die $graph->error;

    my $format = $graph->export_format;
    print header("image/$format");
    binmode STDOUT;
    print $graph->plot(\@diagarray)->$format();

具有各自设备像素比的设备列表。

link：https://bjango.com/articles/min-device-pixel-ratio/

适用于Iphone6和Media的媒体Css Iphone6 plus

1 个答案: