web页面放到手机页面,缩放问题

有时候写页面样式不规范,很多页面元素写死尺寸时,web页面尺寸比较大放到移动端访问时,就背缩放了,div或者按钮变得好小

可以加段js,效果会好点

 1 <script>
 2 ! function( userAgent ) {
 3     var screen_w = parseInt(window.screen.width),
 4         scale = screen_w / 640;
 5     if ( /Android (\d+\.\d+)/.test( userAgent ) ) {
 6         var version = parseFloat( RegExp.$1 );
 7         document.write( version > 2.3
 8             ? ‘<meta name="viewport" content="width=640, minimum-scale = ‘ + scale + ", maximum-scale = " + scale + ‘, target-densitydpi=device-dpi">‘
 9             : ‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘ );
10     } else {
11         document.write( ‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘ );
12     }
13 }( navigator.userAgent );
14
15
16 </script>
时间: 2024-10-26 07:52:30

web页面放到手机页面,缩放问题的相关文章

DZ3.2手机端访问bug彻底解决方法:您访问的页面无手机页面,是否进一步访问电脑版

手机访问dz3.2出现这种情况是部分页面有手机版也会出现这个提示: 提示您访问的页面无手机页面,是否进一步访问电脑版? 使用手机访问的时候,会出现这样的提示 您访问的页面无手机页面,是否进一步访问电脑版? 目前网上提供的解决方案都没有找到问题的根本原因,只是提供了强制刷新的方法,根据本人的调试最终找到了此bug的问题所在,只需要修改 source/function/function_core.php 找到 source/function/function_core.php第618行: 把 $mo

解决微信浏览器访问手机页面:您访问的页面无手机页面,是否进一步访问电脑版?

dz论坛总是报502没办法了,发到这里备份. 这个问题困扰楼主很长时间了,具体原因因为不懂php没去研究源码,所以只能用js解决了.也就是大家常见的通过修改source\language\lang_message.php里的not_in_mobile强制刷新页面,具体修改方法是将提示信息改成 '<meta http-equiv="refresh" content="5" />' 但是这个问题在微信浏览器下是不完全好使的,在朋友圈分享以后这个标签是不自动刷

用电脑调试手机页面

Weinre(WEb INspector REmote)是一个页面调试工具,主要用于远程调试.对于调试手机设备上的页面来说,Weinre是非常有用的. 我们需要一些步骤让Weinre运行起来,首先我们需要安装node.js,Weinre将会运行在node.js上,下一步我们将会安装 node package manager(npm),最后,我们将会安装Weinre. 第一步: 为了得到node.js,最简单的方式是下载windows installer.因为windows installer已经

手机页面中的meta标签

以前看书的时候,觉得meta标签就只有一个charset对于我来说是有用的.前段时间有个学弟让我写个手机版的网页,我才知道原来meta标签有那么多学问. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制

响应式:为什么百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面?

响应式设计不是万能的,它有一定的好处,但也有一定的弊端.先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端. 因为响应式最大的优点就是开发快.打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t. 那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢? 1. 响应式设计带来大量冗余代码.在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码.移动

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

移动互联,手机页面设计

1.手机上网的过程 普通浏览器上网过程  浏览器<--->Web服务器 手机上网过程  手机<--->WAP网关(UP.Link Server)<--->集成HDML,WML的Web服务器 * UP指Unwired Planet公司,其UP.Phone浏览器为手机浏览器的事实标准,以下内容都基于该标准.  *普通web页面用HTML描述,目前手机页面可以用HDML和WML两种语言来描述,它们本质上是用XML 1.0来定义的.本文主要讲述HDML,由于其和HTML有相似,

IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决

在head标签中加入以上meta声明.具体属性可以谷歌/百度. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 我查了下viewport,有几个属性:width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minim

移动页面自适应手机屏幕宽度

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max