最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Different mobile and desktop layout with vuejs - Stack Overflow

programmeradmin2浏览0评论

I'm looking a lightweight and smart way to provide user with different layout or ponent for mobile and desktop view using vue.

My web application consist of a lot of table and as you all know table is not a best experience when use in mobile device (even thought there is a lot of method to make table useable but not enjoyable)

So i thinking to make vue js to detect whether user access web apps from desktop or mobile device. when user open in desktop it will showing a good old table because of screen real estate desktop user have. But when user open in mobile device it will show card or panel like view that more suitable for mobile device (portrait orientation in general)

I know there is a solution with great bootstrap frameworks that can do that, but it is not swapping but instead render all part (html for most part) and just hide each part according to the screen size.

But maybe there is a much more efficient and smart way to implement these features in vue js?

I'm looking a lightweight and smart way to provide user with different layout or ponent for mobile and desktop view using vue.

My web application consist of a lot of table and as you all know table is not a best experience when use in mobile device (even thought there is a lot of method to make table useable but not enjoyable)

So i thinking to make vue js to detect whether user access web apps from desktop or mobile device. when user open in desktop it will showing a good old table because of screen real estate desktop user have. But when user open in mobile device it will show card or panel like view that more suitable for mobile device (portrait orientation in general)

I know there is a solution with great bootstrap frameworks that can do that, but it is not swapping but instead render all part (html for most part) and just hide each part according to the screen size.

But maybe there is a much more efficient and smart way to implement these features in vue js?

Share Improve this question asked Nov 19, 2017 at 4:14 PamanBeruangPamanBeruang 1,5895 gold badges30 silver badges64 bronze badges 4
  • 3 I would say let your css handle the way it renders it to the end user, not the UI renderer ,in this case VUE. – WilomGfx Commented Nov 19, 2017 at 4:22
  • letting your css handle how to hide/show (i.e through media) is the best way unless you want to write a mobile specific site, ones that you normally see and being with m. – A. L Commented Nov 19, 2017 at 4:23
  • Either style the table appropriately (you can change the display of your rows, perhaps to make them look like cards), or just use re-usable ponents in your app that can serve specific content based on the mobile domain (if that’s what you’re using). But, CSS is definitely the best way to handle this. – Mike Rockétt Commented Nov 19, 2017 at 7:30
  • See my answer stackoverflow./a/50342804/6013170 – Jan Commented Oct 3, 2019 at 10:44
Add a ment  | 

2 Answers 2

Reset to default 2

If you have 2 different vue files, one for mobile and the other for desktop you can do like explained at this answer:

https://stackoverflow./a/51053611/1178478

I would say that you should consider css to handle the layout differences, but my view on this is that the way users interact with the content/app/etc can be significantly different between mobile and pc/laptop, beyond just sizing and placing divs differently. If you're providing a different-enough experience based on device, then handling the difference in your js may work better for you.

you can use a library like http://detectmobilebrowsers./ to determine if user is using mobile. Then store that val (isMobile) in a globally accessible variable, using vuex, bus or mixin. This will allow you to create mobile versions of your ponents that you can code-split, and have separate css files. Which I think will make the application easier to maintain long-term (IMHO, but this depends on some factors).

发布评论

评论列表(0)

  1. 暂无评论