Question

我有一个只在纵向模式下运行的应用程序。我想加载css取决于S5的屏幕尺寸和Moto E的较小屏幕尺寸。

S5的homeScreenStyle和Configurecss homeScreenStyleiPhone和Moto E的iphoneConfigure

设备像素宽度像素高度CSS像素比率设备宽度设备高度

Moto E 960 540 2 480 270

Galaxy S5 1920 1080 3 640 360

我为css尝试了不同的变体，但它无效，

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

<link  media="screen and (max-device-width: 350px)" href="assets/css/homeScreenStyleiphone.css" rel="stylesheet">
<link  media="screen and (min-device-width:360px)" href="assets/css/homeScreenStyle.css" rel="stylesheet">



<link   media="screen and (max-device-width: 350px)" href="assets/newcss/iphoneconfigure.css" rel="stylesheet">
<link   media="screen and (min-device-width:360px)" href="assets/newcss/configure.css" rel="stylesheet">

请帮忙。我无法弄清楚确切的宽度。

Answer 1

在css文件中，使用百分比值中元素的宽度和高度，例如

function a($p1, $p2 = "default value one") {
  if ($p2 === "default value") {
    b($p1);
  } else {
    b($p1, $p2);
  }
}

function b(q1, q2 = "default value two") {
  ...
}

它会根据设备宽度自动调整元素，不需要更多的css文件

Answer 2

虽然我不知道为什么你只针对2部手机？我想与您分享我的经验。

首先，我瞄准任何桌面和桌面移动浏览器加Android手机和iphone。

对于屏幕可用的宽度和高度，我使用JavaScript得到它，你可以通过google windowHeight和windowWidth得到这些js。

对于css，我只使用1个css，但css中的所有数字都是以相对于屏幕宽度或高度的比率动态设置的。例如font-size = windowHeight / 20

然后用户看到的外观应该在不同的手机或浏览器上相似

Cordova应用程序针对S5和Moto E.

2 个答案: