适用于所有不同设备的响应式网页设计答案

【问题标题】：Responsive Webdesign for all the different devices适用于所有不同设备的响应式网页设计
【发布时间】：2019-06-13 10:25:01
【问题描述】：

我有大约 5 年的网络开发经验。但有时我有这个问题，我无法自己回答。现在有太多的设备具有不同的屏幕解决方案，无论是横向还是纵向等等。

我仍然使用 Bootstrap 断点（1200 像素、1024 像素、768 像素，对于移动设备我使用 480 像素最大宽度），但最近我的网站出现了一些问题，因为客户正在使用华为或某些智能手机作为示例不像 iphone 那样受欢迎，而且网站没有针对这款特定的智能手机进行优化。

那么我怎样才能避免这样的事情呢？你有什么好的建议吗？

【问题讨论】：

【解决方案1】：

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

我使用下面的页面作为参考来构建非常具体的媒体查询或您想要的一般查询。

希望这会有所帮助。

【讨论】：

【解决方案2】：

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

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

$_SERVER['HTTP_USER_AGENT'];

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

数组中的用户代理：

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

对于设备：

$regex_match.= "htc|huawei";

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

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

【讨论】：

【解决方案3】：

对于真正的响应式设计，避免使用断点来影响样式。已经有太多的可能性了，而且还有更多的可能性，任何人都无法做到。

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

测试纵横比以确定是横向还是纵向模式。

@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）。

【讨论】：