Question

亲爱的stackoverflow社区，

过去创建响应式设计，很容易使用@media的最小宽度和最大宽度来定义设计比例。现在我们拥有大屏幕旋转的智能手机和平板电脑，如1080p（1920 x 1080）在大多数最近基于Android的智能手机和平板电脑上。 iOS在+ 720p屏幕分辨率下很受欢迎。

事实上，现在大多数桌面分辨率与智能手机和平板电脑相当，我找不到一种简单的方法来区分css中的案例。

如果不使用CMS或过多的预构建模板，您是否知道实现这一目标的良好指南？

非常感谢！

Answer 1

如果你有一个触摸设备，这个javascript代码会向body元素添加一个类。这对我帮助很大，并且很容易在移动设备和桌面设备之间分离。

<script type="text/javascript"> 
    //detect if browser supports touch
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device){
        $('body').addClass('touchDevice');
    }else{
        $('body').addClass('notTouch');
    };
</script>

智能手机和桌子的CSS案例

1 个答案: