让PC版网站在移动端原样式显示

一般PC网站在移动端显示效果往往和PC版原样式不同，为了在移动端下还原原PC站样式，可以采用以下方式解决：

1）去掉页头的： <meta name="viewport" content="width=device-width, initial-scale=1"/> 这样的代码

2）引用jquery.js ,加入以下脚本：

 if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { // 判断当前访客是否是移动端

     var bl = '';

     bl = $(window).width() / 1200; // 假设你的PC版设计尺寸是1200像素，如果你是1920像素下设计的，请改成1920

     $("body").css("zoom", bl)

                    .css('-moz-transform', 'scale(' + bl + ')')

                    .css('-moz-transform-origin:', "top left");

     $("body").css("zoom", $(window).width() / 1200) // 同比例更改

                    .css('-moz-transform', 'scale(' + bl + ')')

                    .css('-moz-transform-origin:', "top left");

 }

以上代码采用将页面整体比例缩放，实现兼容移动端显示效果。

巴特西

让PC版网站在移动端原样式显示

最新文章

热门文章