响应式页面设计的原理是让页面根据浏览器屏幕宽度/视口宽度自适应，较理想地呈现出页面内容。
较常见的做法是使用CSS media query，而且通常会在meta标签中对viewport的宽度等进行设定（比如设定width: device-width）。但即便不用这种方法，只要页面能根据屏幕宽度做出自适应的调整，那就是响应式设计。
function fit () {
const scale = $('body').width() / 640
$('html').css('font-size', 100 * scale + 'px')
}
$(document).ready(() => {
const userAgent = window.navigator.userAgent.toLowerCase()
if (userAgent.indexOf('android') === -1 && userAgent.indexOf('iphone') === -1) {
$('body').addClass('pc')
}
fit()
$('html').css('height', $(window).height() + 'px')
$(window).resize(fit)
if (userAgent.indexOf('android') !== -1) {
const originalHeight = $(window).height()
// 部分安卓机弹出输入法时底部的fixed定位的按钮也会被谈起来导致输入框被遮住
$(window).resize(() => {
const scale = $('body').width() / 640
// .footer-button-container是被fixed定位在页面底部的元素
if (Math.abs(originalHeight - $('.footer-button-container').offset().top - 108 * scale) < 100 || $('.footer-button-container').offset().top === 0) {
$('.footer-button-container').show()
} else {
$('.footer-button-container').hide()
}
})
}
})