让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版网站在移动端原样式显示的更多相关文章
- 手机访问pc版网站自动跳转为手机版页面
1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...
- Nginx学习总结(2)——Nginx手机版和PC电脑版网站配置
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...
- 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块
本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...
- DTcms手机版使用余额支付 提示信息跳转到PC版的错误。以及提交订单不打开新页面
手机版使用余额支付 提示信息跳转到PC版的错误 引起错误的原因是中间需要提交到DTcms.Web\api\payment\balance\index.aspx去处理 导致BasePage.cs中的li ...
- WebApp触屏版网站开发要点
所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...
- 支付宝支付-PC电脑网站支付
支付产品全面升级(更新时间:2017/05/05 ),若您使用的是老接口,请移步老版本即时到账文档. 支持沙盒环境的测试 此项目已开源欢迎Start.PR.发起Issues一起讨论交流共同进步 htt ...
- PC版淘宝UWP揭秘
经过第一轮内测后的bug数量:65 2015/11/27 - bug数量 = 60 2015/11/30 - bug数量 = 53 2015/12/1 - bug数量 = 49 2015/12/2 - ...
- 全能直播王PC版-0707-full_codecs
全能直播王是一款高清流畅的全平台的电视直播应用,让您随时随地看高清电视直播. [全能特色] 1. 收录全国1400多个直播频道,包括湖南卫视.江苏卫视.浙江卫视等热门频道. 2. 频道多线路自动选择, ...
- 通过JS语句判断WEB网站的访问端是电脑还是手机
通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...
随机推荐
- React.js 中文文档
转自http://react-china.org/t/react-js/398的jsgeeker 中文文档地址 http://reactjs.cn GitHub地址 https://github.co ...
- 原生js 异步请求,responseXML解析
异步更新原理:用XMLHTTP发送请求得到服务器端应答数据,在不重新载入整个页面的情况下,用js操作Dom最终更新页面1.创建XMLHttp请求协议 function createXMLHttpReq ...
- oracle 基础知识(三)
一.删除oracle 进入注册表到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\OracleOraHome91TNSListener Ima ...
- 在Azure上部署Sqlserver网络访问不了的问题
最近在部署Azure虚拟机的时候,一直访问不了网络数据库,一搜资料才知道,Azure默认是不打开入网规则的,需要手动设置. 在 Windows 防火墙中为数据库引擎的默认实例打开 TCP 端口 在“开 ...
- 使用classList来实现两个按钮样式的切换
classList属性的方法:add();remove();toggle(); 描述,在一些页面我们需要使用两个按钮来回切换,如图: 我们要使用到add()和remove()方法 html部分: &l ...
- iOS之创建表格类视图WBDataGridView
项目中创建表格, 引用头文件 #import "WBDataGridView.h" - (void)viewDidLoad{ [superviewDidLoad]; // Do a ...
- Vue--- 使用vuex使用流程 1.0
Vuex 1.安装vuex npm install -save vuex 2. 引入 创建store文件夹目录 创建 vuex 指挥公共目录 store['state','action ...
- seajs简单使用
背景:在做一个功能时需要用到一个JS库,但是这个库比较大,想要在只有用到这个功能时再去加载这个库. <script src="~/Scripts/jquery-1.10.2.min.j ...
- C++定义一个简单的Computer类
/*定义一个简单的Computer类 有数据成员芯片(cpu).内存(ram).光驱(cdrom)等等, 有两个公有成员函数run.stop.cpu为CPU类的一个对象, ram为RAM类的一个对象, ...
- 关于 'list' object has no attribute 'select'
我是在写爬虫是遇到了这个问题: c = chapter.select('href')AttributeError: 'list' object has no attribute 'select' 这是 ...