CSS Reset for Mobile website development

Here are some CSS reset codes particularly for mobile website development. This might be useful for you if you are using custom code from scratch without using any other UI frameworks like Twitter Bootstrap.

---

CSS Reset

*, :before, *:after {
  / suppressing the tap highlight */
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  /* this is a personal preference */
  box-sizing: border-box;
  vertical-align: top;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
:focus {
  / the default outline doesn’t play well with a mobile application,
     I usually start without it,
     but don’t forget to research further to make your mobile app accessible. */
  outline: 0;
}

input {
  border-radius: 0;
}

html, body {
  /* we don’t want to allow users to select text everywhere,
     you can enable it on the places you think appropriate */
  user-select: none;
}
@keyframes pageFadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

body {
  opacity:0;
  animation:pageFadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:0.15s;
  animation-delay: .1s;
  font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

---

Prevent user scaling

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Overscroll

<preference name="webviewbounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>

Some jQuery

$('body').on('touchmove', function (e) {
  if (! $('.scrollable').has($(e.target)).length)
    e.preventDefault();
});

For Momentum Scroll

.scrollable {
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
}

Credits – https://subvisual.co/blog/posts/53-a-better-reset-for-the-mobile-web/