DEV Community

Sanyam Jain
Sanyam Jain

Posted on • Edited on

Caveats while Building Mobile Website using Vue/Nuxt

While building a mobile website, you'll encounter a lot of roadblocks. I'll try to list all of them here, while I learn more about them.

  1. One of the biggest caveats is everything feels slow in android firefox & iOS safari. And the reason for it is that on each click, the browser waits for around ~300ms to know whether it was a single or double click.
    Solution & More about it here: https://stackoverflow.com/a/21062165/2963579

  2. URL Bar Resizing - Different vh for a fixed element on a scroll.
    Solution & more about it here:
    https://dev.to/peiche/100vh-behavior-on-chrome-2hm8

  3. /deep/ property is not fully supported by all browsers.(at least firefox), so avoid using it.

  4. when the user taps on any text, the text is searched on google.
    make user-select: none for mobile. (don't do for desktop, as the user won't be able to select anything)

  5. position: sticky behaves very differently in mobile chrome & firefox, avoid using it.

  6. On mobile, v-model="keyword" will not updated until you press space.
    https://github.com/vuejs/vue/issues/8231

Top comments (0)