Web页面在手机上显示过大问题

网上抄来了,自己也备忘下:增加<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=device-dpi">

参数说明:

target-densitydpi=device-dpi,指定屏幕像素密度DPI,device-dpi 为设备原本的DPI值,不会有任何缩放,也可以在80-400之间 指定一个数字比如400dpi 表示缩放页面

width=device-width,指定屏幕宽度,device-width设备屏幕的宽度。

initial-scale=1,初始缩放比例,设置为1,表示不进行任何缩放,显示原始大小。

user-scalable=no,用户否否可以手动缩放页面,设为no不允许。

minimum-scale=1.0,最小缩放比例,设为1,最小只能缩放到1倍。

maximum-scale=1.0,最大缩放比例,设为1,最大只能缩放到1倍,与上一项配合,保证,页面不会进行缩放。

时间: 2024-10-18 15:52:25

Web页面在手机上显示过大问题的相关文章

transform:rotate在手机上显示有锯齿的解决方案

transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决. 原理没去深究,理论上是矢量跟位图的处理不一样,这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/ update: 大家反应这方案在电脑上反而会出问题. 我测试了个新的方案rotate3

如何正确地在手机上显示图片——QImage与QPixmap完全解析

引言 用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了.那么先让大家看两段代码: //dangerous should not be used, cannot display earth.png, //but if we change earth.png to a smaller image e.g. apple.png, apple.png can be displayed QPixmap pixmap; pixmap.load( ":/pics/earth.png&quo

让PC端页面在手机端显示缩小版的解决方法

做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="white&qu

关于 toLocaleString() 在手机上显示和小程序开发者工具显示不一样的问题

今天写项目时遇到的一个问题,现在来记录一下,加深一下自己的印象: 我从后台拿到数据之后,需要把里面的时间戳转换为日期显示用了toLocaleString()这个方法,刚开始在开发者工具上展示没一点毛病, 当我在手机上运行时,发现展示效果不一样啊!!!! 于是乎,就放弃了toLocaleString() 直接换成了 res = '时间戳' let date = new Date(parseInt(res) * 1000 ) ; res = data.getFullYear()+'/'+(ss.ge

通达OA web页面与精灵显示内容更新后不一致的问题

前一段就发现有这种问题.就是在开发的电话查询里更新的信息,可是在精灵对话窗体上显示的还是原来的信息.这样导致从新开发入口更新信息就不能使用.一開始还以为是厂家升级,变更了存储的表结构.感觉下载近期的升级包都装上.可是发现库结构没有什么变化. 细致看了一下,原来web开发部分与精灵显示确实从机制上有些差别,web不说,精灵的数据採用了一种缓存机制,我想通达这种设计主要还是为了避免反复读取数据库,能够减轻server压力. 找到原因后依照这种思路也同步更新缓存数据后,精灵显示内容也与web一致了,O

网页底色在手机上显示不完整的解决办法

PC端显示的效果: 用Chrome开发工具的手机端模式观看,可以看到网页右边出现了许多空白: 解决办法是,在样式中给body添加一个最小宽度,该网页为1200px: body { min-width: 1200px; } 添加样式后的显示效果为:

transform:rotate在手机上显示有锯齿的解决方案大全

先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /* Opera */} 1.来自[作者:梦幻神化]的blog: 使用CSS3 3D transf

mime导致zabbix web页面css样式不能显示的问题

在一台新系统上yum装完zabbix后发现web页面不能正确显示css样式表.页面如下图: 看了下目录发现.css文件和图片文件都在,不是文件路径的问题.百度了下发现是mime把text/css解析成text/html造成的.于是干脆找了一份比较全的mime.types文件放到/etc下,重命名为apache_mime.types.然后修改Apache的配置文件修改mime文件路径为/etc/apache_mime.types. 重启httpd服务并清除缓存后页面显示正常. mime.types

远程实时调试手机上的Web页面

1. 安装    需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre npm -g install weinre 2. 启动    安装完成后, 我们接着启动 weinre weinre -httpPort 8081 -boundHost -all- 能打开这个地址就说明weinre启动成功了 可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后,