JS针对pc页面固定宽度在手机展示问题 <meta ...>
结合一些 网上大神级前端作品的 介绍 修改了一下自己的代码 做出了一个相对简单的缩放代码
1.
<meta name="viewport" content="width=device-width, initial-scale=1">
meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度。
下面是我结合修改的代码
<!--页面宽度适配 显示相同宽度 但每个设备所显示的像素大小不一样-->
经过测试 发现 在手机QQ 微信 等 X5内核浏览器也可以使用 支持手动缩放
(function () {
var meta = document.createElement("meta");
var width = window.screen.width;
var targetWidth = 1500;
var scale = width / targetWidth;
meta.name = "viewport";
meta.content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=1,user-scalable=yes,target-densitydpi=" + width;
document.head.appendChild(meta);
})();
width 是获取手机的显示器宽度 ; targetWidth 为你的页面在pc 端显示器宽度(可根据个人实际情况修改);scale 获取网站的缩放比例 ;
user-scalable=yes; 由于我制作的页面一般在pc端显示 使用的字体大小单位是px;所以加了一个手动缩放功能便于提高用户体验。
JS针对pc页面固定宽度在手机展示问题 <meta ...>的更多相关文章
- H5_0006:JS判断PC,平板,手机平台的方法
<script type="text/javascript"> //平台.设备和操作系统var system = { win: false, mac: false, x ...
- 根据不同访问设备跳转到PC页面或手机页面
目前很多网站都是采用了响应式自适应页面的设计了,根据访问设备的不同,显示不同的内容.但是还是会有一些节奏比较慢的网站,还是PC页面和手机PAD页面不同的访问域名.正好我这里有个需要,同一个域名要根据不 ...
- websocket做手机页面聊天与PC页面聊天一对一的即时通讯
当时要写这个需求的时候,很头痛,手机端页面的客服功能,相当于QQ这样一个一对一聊天室功能了,瞬间蒙蔽的我也不知道用什么去写这个东西,一开始用ajax,定时器去写,写着写着发现这尼玛不在同一个页面怎么做 ...
- 【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面
Bootstrap如同前台框架,它已经布置好不少的CSS.前端开发的使用须要则直接调用就可以.其站点的网址就是http://www.bootcss.com.使用Bootstrap能降低前端开发时候在C ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- 手机设备访问PC页面如果跳转到手机页面?
//例如:iphone访问www.baidu.com自动跳转到wap.baidu.com,只需在pc端模版页面引入以下js代码//pc zhuan mobile var mobileAgent = n ...
- js判断PC端 移动端 并跳转到对应页面
一.PC端跳转到移动端 html页面: <script>var webroot="/",catid="{$catid}",murl="m/ ...
- 【方法】JS判断当前页面环境:PC端/移动端,安卓/IOS,微信环境/QQ环境等等
[主要知识] 浏览器设备信息:navigator.userAgent(本文中主要用到知识) 浏览器版本信息:navigator.appVersion var ua = navigator.userAg ...
- H5页面,华为手机打开不加载JS的问题
今天在做H5页面放在其他手机上面都可以刷出列表,但是就是放在华为手机上面刷不出来,怎么想都想不通,后面主管说华为手机的浏览器是严格遵守H5什么鬼东西的,然后其他浏览器做到比较好的,如果有报错就帮我们解 ...
随机推荐
- shell脚本交互:expect学习笔记及实例详解
最近项目需求,需要写一些shell脚本交互,管道不够用时,expect可以很好的实现脚本之间交互,搜索资料,发现网上好多文章都是转载的,觉得这篇文章还不错,所以简单修改之后拿过来和大家分享一下~ 1. ...
- xdu_1077:循环节长度
题意很简单,就是给出p,q,求p/q的循环节长度. 由循环小数的循环部分的值等于等比数列求和的值S,列公式得到最简分数分母的值.最终得10^x%q==1(其中q为经过modify之后的值).搞清这些之 ...
- 认识cpu、核与线程
作为一个后台开发人员,我想有必要了解这些基础知识.如果本文有不严谨或者疏忽的地方,请指正. cpu与核心 物理核 物理核数量=cpu数(机子上装的cpu的数量)*每个cpu的核心数 虚拟核 所谓的4核 ...
- python基础(9):文件处理
很多软件都会有有对文件处理的功能.今天我们就来学习文件处理. 文件处理 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,可以将结果赋值给一个变量,这个变量我们称为句柄.这样我们就可以通过这个 ...
- Android学习笔记-TextView(文本框)(二)
2.4 使用autoLink属性识别链接类型 当文字中出现了URL,E-Mail,电话号码,地图的时候,我们可以通过设置autoLink属性:当我们点击 文字中对应部分的文字,即可跳转至某默认APP, ...
- 简易 HTTP Server 实现(JAVA)
该简易的J2EE WEB容器缺失很多功能,却可以提供给大家学习HTTP容器大致流程. 注:容器功能很少,只供学习. 1. 支持静态内容与Servlet,不支持JSP 2. 仅支持304/404 3. ...
- OpenLayers3--ol3--新特性
OL3: A high-performance, feature-packed library for all your mapping needs < 一个可以满足各种地图应用的高性能的.功能 ...
- nodeJS之域名DNS
前面的话 本文将详细介绍域名解析模块DNS 工作原理 打开浏览器,在上方地址栏输入网址的那一刻,这个回车按了之后,发生了很多事情.首先,计算机只懂0和1,也就是说人类的字母网址计算机是不懂的,它只认识 ...
- oracle 审计日志清理
--进入审计日志目录: cd $ORACLE_BASE/admin/$ORACLE_SID/adump --删除3个月前的审计文件: find ./ -type f -name "*.a ...
- 移动端APP页面Webview模式跳转详解
首先,来看一下关于Android home键和back键区别 back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Dest ...