Question

我有大约5年的Web开发人员经验。但是有时候我有这个问题，我无法自己回答。如今，有很多设备在横向和纵向等方面具有不同的屏幕解决方案。

我仍然使用Bootstrap断点（1200px，1024px，768px，对于移动设备，我使用480px最大宽度），但是最近我的网站出现了一些问题，因为客户使用的是huawai或某些智能手机，并不像iPhone那样受欢迎，并且该网站尚未针对该特定智能手机进行优化。

那么我该如何避免类似的事情？你有给我好的小费吗？

Answer 1

为具有多个设备要求的客户端工作可能是一场噩梦...您将来可能要做的是请您的客户端为您提供要构建的应用程序和目标设备的规范（甚至针对型号）。

我使用下面的页面作为参考来构建非常具体的媒体查询，或者根据您的意愿进行通用。

希望这会有所帮助。

Answer 2

有时您需要对某些设备进行一些“修复”。

解决此问题的一种方法是获取用户代理：

$_SERVER['HTTP_USER_AGENT'];

之后，您可以使用正则表达式或将它们加载到数组中以匹配用户代理或设备：

阵列中的用户代理：

$mobile_agents = array('w3c ','acs-','and','so', 'on');

对于设备：

$regex_match.= "htc|huawei";

现在该页面可以检测到用户代理，该页面也可以可以给出设备的特定样式表/媒体查询。

这是php中的一个简单示例，您也可以将设备和用户代理分组。

Answer 3

对于真正的响应式设计，请避免使用断点来影响样式。任何人都已经把它弄对了。

关于我发现@media大小查询的唯一用途是：

测试宽高比，以确定它是横向还是纵向。

@media (max-aspect-ratio 1/1) { ...

测试物理尺寸以将按钮在小屏幕上移动得更远。

@media  screen and (max-width: 6in) {
    a { line-height: 200%; }  /* fat-finger clickables */
    input[type=radio] { margin: .5em; }
}

当然，在所有CSS中，请记住不要使用绝对单位，而要始终使用相对单位（％，em，vh，vw）。