Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
可能大家发现自己制作的手机端页面,默认打开的时候并不是在理想的缩放状态下。
遇到这样的问题,需要在head标签下,添加meta解决。
代码如下:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0″/> //控制默认缩放大小、最小缩放大小、最大缩放大小。通过这个可以设置用户的最大和最小缩放程度。 <meta name=”MobileOptimized” content=”320″/> //表示为移动设备的默认显示宽度为320px,此参数目前使用与安卓手机设备 <meta name=”Iphone-content” content=”320″/> //表示为Iphone设备的默认显示宽度为320px <meta name=”format-detection” content=”telephone=no” /> //表示手机模式设置为启用。
其他相关参考链接:
http://www.jb51.net/article/121531.htm
http://www.jb51.net/article/121515.htm
http://www.jb51.net/article/121524.htm
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对我们的支持!
相关推荐
-
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试
-
浏览器缩放检测的js代码
测试代码 http://jsbin.com/dipijeqi/11 效果: chrome 复制代码 代码如下: window.devicePixelRatio : 2 (准确) screen.deviceXDPI / screen.logicalXDPI : NaN window.outerWidth / window.innerWidth : 2 document.documentElement.offsetHeight / window.innerHeight : 0.0206185567
-
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 var u
-
关于meta viewport中target-densitydpi属性详解(推荐)
前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" > 但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性.看之初不太了解,也因为当时自己手
-
jQuery实现响应浏览器缩放大小并改变背景颜色
/*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();
-
java 查询oracle数据库所有表DatabaseMetaData的用法(详解)
一 . 得到这个对象的实例 Connection con ; con = DriverManager.getConnection(url,userName,password); DatabaseMetaData dbmd = con.getMetaData(); 二. 方法getTables的用法 原型: ResultSet DatabaseMetaData.getTables(String catalog,String schema,String tableName,String []type
-
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
可能大家发现自己制作的手机端页面,默认打开的时候并不是在理想的缩放状态下. 遇到这样的问题,需要在head标签下,添加meta解决. 代码如下: <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0″/> //控制默认缩放大小.最小缩放大小.最大缩放大小.通过这个可以设置用户的最大和最小缩放程度. <
-
JS滚轮控制图片缩放大小和拖动的实例代码
具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 71
-
js实现鼠标滚轮控制图片缩放效果的方法
本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
jquery实现根据浏览器窗口大小自动缩放图片的方法
本文实例讲述了jquery实现根据浏览器窗口大小自动缩放图片的方法.分享给大家供大家参考.具体如下: (function($){ $.fn.resizeimage = function(){ var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload =
-
JS实现控制图片显示大小的方法【图片等比例缩放功能】
本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
-
教你用python控制安卓手机
一.介绍 ADB(Android调试桥)是一个命令行工具(CLI),可用于控制Android设备并与之通信.您可以执行许多操作,例如安装应用程序,调试应用程序,查找隐藏的功能并使用外壳程序直接与设备连接.要启用ADB,您的设备必须首先解锁开发者选项并启用USB调试.要解锁开发人员选项,您可以转到设备设置,然后向下滚动到"关于"部分,找到设备上当前软件的内部版本号.单击内部版本号 7次,将启用开发人员选项.然后,您可以转到设置中的"开发人员选项"面板,然后从那里启用U
-
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML <input type="file" id="choose" capture="camera" accept="image/*"> JavaScript var filechooser = document.getEleme
-
手机浏览器 后退按钮强制刷新页面方法总结
由于A界面的数据是通过ajax交互的,当你跳转到B界面,点击手机浏览器自带的后退回到A界面,由于缓存原因,读取到的数据不是最新的数据. 查了很多资料,看到网上的解决方法是清理缓存,然后页面重新向服务器发出请求. 下面整理一下,解决这个问题的方法. 方法1,HTML头部,禁止缓存: <meta http-equiv="Expires" CONTENT="0"> <meta http-equiv="Cache-Control" CO
-
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决 微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the same task is working wx.uploadFile不能并行,因为wx.uploadFile是一个异步函数,所以循环的时候在安卓手机上会出现并行 解决的方法 做一个上传完的
-
安卓手机socket通信(服务器和客户端)
本文实例为大家分享了安卓手机socket通信代码,供大家参考,具体内容如下 1.socket通信首先要定义好服务端的ip地址和端口号: (1).首先看服务端的代码: package com.example.androidsockettest; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import
随机推荐
- 在Win2003中安装bind教程(部署智能DNS)
- iOS开发中以application/json上传文件实例详解
- java arrayList遍历的四种方法及Java中ArrayList类的用法
- python使用MySQLdb访问mysql数据库的方法
- Python实现模拟分割大文件及多线程处理的方法
- Android编程中出现The connection to adb is down问题的解决方法
- php-beanstalkd消息队列类实例分享
- 使用PyV8在Python爬虫中执行js代码
- html+js实现简单的计算器代码(加减乘除)
- Ajax基础知识详解
- js清空form表单中的内容示例
- C# 利用IRawPixels接口遍历栅格数据
- 用Python实现服务器中只重载被修改的进程的方法
- 原生JS取代一些JQuery方法的简单实现
- 鼠标经过子元素触发mouseout,mouseover事件的解决方案
- IE问题集锦
- 自己动手写一个java版简单云相册
- angular2中Http请求原理与用法详解
- Vue自定义指令实现checkbox全选功能的方法
- android实现多图文分享朋友圈功能