今天做了个pc的页面,看了别人的网站在手机端能把pc端的网页刚好缩放到手机端,看着很舒服。

于是想把自己的页面也这样搞一下,刚开始,想到的是利用css3的缩放来做,想的是当屏幕尺寸改变时缩放整个页面,这样顺便写了个代码,但是在手机端却没有效果,然后仔细一想,手机端屏幕是不会变化的,根本无法触发window.onresize方法,再说,这样做了之后,在pc端改变屏幕尺寸后,页面是跟着缩放的,但是别人的网站在pc端改变屏幕尺寸时,是不会变化的,所以这样做肯定是错误的。

然后开始百度,看到一条评论,只需要把下边这段代码去掉就行了

  1. <meta name="viewport" content="width=device-width,initial-scale=1.0">

!!!

试了一下,在页面中写的一个width=1200px的元素,能够恰到其份的适配下来!!!缩放的刚刚好

下面来了解一下meta标签中这些值的含义:

  1. width=device-width:表示布局viewport的值是设备的宽度(也可以是特定的viewport值)
  2. initial-scale=1.0 设置页面的初始缩放比例
  3. minimum-scale=1.0 设置页面的最小缩放比例
  4. maximum-scale=1.0:设置页面的最大缩放比例
  5. user-scalable=no 设置用户是否可以缩放操作

移动端默认会缩放大尺寸的页面的,当我们把上述代码去掉之后,就会随着移动端缩放的比例走,而且还可以自由放大。

下面是另一篇文章会对meta标签加深理解:号称---------JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

  1. <script>
  2. var phoneWidth = parseInt(window.screen.width);
  3. var phoneHeight = parseInt(window.screen.height);
  4. var phoneScale = phoneWidth/;//除以的值按手机的物理分辨率
  5. var ua = navigator.userAgent;
  6. if (/Android (\d+\.\d+)/.test(ua)) {
  7.   var version = parseFloat(RegExp.$1);
  8.   // andriod 2.3
  9.   if (version > 2.3) {
  10.     document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
  11.   // andriod 2.3以上
  12.    } else {
  13.     document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
  14.   }
  15. // 其他系统
  16. } else {
  17.   document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
  18. }
  19. </script>

上面代码是专门针对移动端设置的meta标签缩放比例,根据设计图宽度的不同而设置的(这样的设置并不适合我的情况,因为这样设置了之后,在手机端是不能缩放的,因为上面代码写死了缩放比例)。

然后自己又试了试,把元素尺寸写的更大一些,当我写1800px时,手机端到450px时就不能再缩小了,当我写1200px时,手机端到300px就不能再缩小了,所以手机缩放也有一定的极限值,

我暂且认定手机端能够将大尺寸元素缩小4倍。那么,一般的手机不会低于300px;那么一般手机就能够把1200px的元素完好缩放到手机上,终于明白了为什么大多数设计图,固定尺寸为1200px,原来是这样的道理。

那么,我们要向将pc端的页面能够在手机端完好缩放,我们就需要将pc端的能容宽度固定在一个值之内,我选择将内容装在1200px的元素内,这样就可以让pc端网页在移动端完好缩放了。

pc页面自动缩放到手机端的更多相关文章

  1. 手机端页面访问PC页面自动跳手机端代码

    <script> var mobileAgent = new Array("iphone", "ipod", "ipad", & ...

  2. iPhone/android的viewport 禁止页面自动缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...

  3. 手机访问pc网站自动跳转手机端网站代码

    <SCRIPT LANGUAGE="JavaScript">function mobile_device_detect(url){        var thisOS= ...

  4. 手机访问pc网站自动跳转手机端网站PHP代码

    $agent = $_SERVER['HTTP_USER_AGENT']; if(strpos($agent,"comFront") strpos($agent,"iPh ...

  5. 苹果客户端input时页面自动放大的问题

    一.问题: 最近在用vue测试的时候发现,安卓端在输入框input时不存在页面自动缩放的问题,苹果客户端认为是考虑到用户的体验效果,才出现输入框自动放大的功能.但也收到了不少用户反馈体验效果不周. 二 ...

  6. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  7. 移动端页面按手机屏幕分辨率自动缩放的js

    <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...

  8. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

  9. PC端页面转换成手机端页面的分辨率问题的理解

    PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...

随机推荐

  1. 在论坛中出现的比较难的sql问题:33(递归 连续日期问题 )

    原文:在论坛中出现的比较难的sql问题:33(递归 连续日期问题 ) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必 ...

  2. javascript序列化表单追加参数

    js序列化表单后追加参数方式: 追加参数:token,status var data = $.param({"token":token, "status":st ...

  3. mock打桩测试

    pom依赖: <!-- https://mvnrepository.com/artifact/org.jmockit/jmockit --> <dependency> < ...

  4. mongodb 备份与还原操作

    环境信息: 版本: mongodb 3.2 备份: mongodump 恢复: mongorestore 本文参考官方文档:https://docs.mongodb.com/manual/refere ...

  5. Fortify漏洞之Access Control: Database(数据越权)

    继续对Fortify的漏洞进行总结,本篇主要针对 Access Control: Database(数据越权)的漏洞进行总结,如下: 1.Access Control: Database(数据越权) ...

  6. 高性能的js第三方库——lodash、 Underscore、async、md5及moment

    背景:为了实现某些功能,如:数据排序.分组.筛选.深拷贝等,自己写的函数或网上搜索处理的转换函数质量无法保证,这时直接使用成熟的js第三方库是首选. *注:“framework(框架)”,“libra ...

  7. C#导出和导入Excel模板功能

    引用  Aspose.Cells; 基于WinForm 导入 private void btn_excel_input_Click(object sender, EventArgs e) { try ...

  8. Android笔记(二十九) Android中的异步更新(一) Android中的线程

    Java中的线程 1. 线程的两种实现方式 ①继承Thread类 ②实现Runnable接口 两者区别在于,Thread这个类的对象,代表的是一个线程,而Runnable的对象,代表的是线程体(也就是 ...

  9. Android笔记(十一) Android中的布局——网格布局

    网格布局是Android4.0新增的布局管理器,因此需要在Android4.0之后的版本才可以使用,之前的平台使用该布局的话,需要导入相应的支持库. GridLayout的作用类似于HTML中的tab ...

  10. Codeforces #367 (Div. 2) D. Vasiliy's Multiset (trie 树)

    http://codeforces.com/group/1EzrFFyOc0/contest/706/problem/D 题目:就是有3种操作 + x向集合里添加 x - x 删除x元素,(保证存在 ...