一般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版网站在移动端原样式显示的更多相关文章

  1. 手机访问pc版网站自动跳转为手机版页面

    1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...

  2. Nginx学习总结(2)——Nginx手机版和PC电脑版网站配置

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  3. 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  4. DTcms手机版使用余额支付 提示信息跳转到PC版的错误。以及提交订单不打开新页面

    手机版使用余额支付 提示信息跳转到PC版的错误 引起错误的原因是中间需要提交到DTcms.Web\api\payment\balance\index.aspx去处理 导致BasePage.cs中的li ...

  5. WebApp触屏版网站开发要点

    所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...

  6. 支付宝支付-PC电脑网站支付

    支付产品全面升级(更新时间:2017/05/05 ),若您使用的是老接口,请移步老版本即时到账文档. 支持沙盒环境的测试 此项目已开源欢迎Start.PR.发起Issues一起讨论交流共同进步 htt ...

  7. PC版淘宝UWP揭秘

    经过第一轮内测后的bug数量:65 2015/11/27 - bug数量 = 60 2015/11/30 - bug数量 = 53 2015/12/1 - bug数量 = 49 2015/12/2 - ...

  8. 全能直播王PC版-0707-full_codecs

    全能直播王是一款高清流畅的全平台的电视直播应用,让您随时随地看高清电视直播. [全能特色] 1. 收录全国1400多个直播频道,包括湖南卫视.江苏卫视.浙江卫视等热门频道. 2. 频道多线路自动选择, ...

  9. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

随机推荐

  1. React.js 中文文档

    转自http://react-china.org/t/react-js/398的jsgeeker 中文文档地址 http://reactjs.cn GitHub地址 https://github.co ...

  2. 原生js 异步请求,responseXML解析

    异步更新原理:用XMLHTTP发送请求得到服务器端应答数据,在不重新载入整个页面的情况下,用js操作Dom最终更新页面1.创建XMLHttp请求协议 function createXMLHttpReq ...

  3. oracle 基础知识(三)

    一.删除oracle 进入注册表到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\OracleOraHome91TNSListener Ima ...

  4. 在Azure上部署Sqlserver网络访问不了的问题

    最近在部署Azure虚拟机的时候,一直访问不了网络数据库,一搜资料才知道,Azure默认是不打开入网规则的,需要手动设置. 在 Windows 防火墙中为数据库引擎的默认实例打开 TCP 端口 在“开 ...

  5. 使用classList来实现两个按钮样式的切换

    classList属性的方法:add();remove();toggle(); 描述,在一些页面我们需要使用两个按钮来回切换,如图: 我们要使用到add()和remove()方法 html部分: &l ...

  6. iOS之创建表格类视图WBDataGridView

    项目中创建表格, 引用头文件 #import "WBDataGridView.h" - (void)viewDidLoad{ [superviewDidLoad]; // Do a ...

  7. Vue--- 使用vuex使用流程 1.0

    Vuex 1.安装vuex npm install  -save vuex 2. 引入 创建store文件夹目录 创建 vuex     指挥公共目录    store['state','action ...

  8. seajs简单使用

    背景:在做一个功能时需要用到一个JS库,但是这个库比较大,想要在只有用到这个功能时再去加载这个库. <script src="~/Scripts/jquery-1.10.2.min.j ...

  9. C++定义一个简单的Computer类

    /*定义一个简单的Computer类 有数据成员芯片(cpu).内存(ram).光驱(cdrom)等等, 有两个公有成员函数run.stop.cpu为CPU类的一个对象, ram为RAM类的一个对象, ...

  10. 关于 'list' object has no attribute 'select'

    我是在写爬虫是遇到了这个问题: c = chapter.select('href')AttributeError: 'list' object has no attribute 'select' 这是 ...