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

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持!

赞 (0)

相关推荐

  • 自适应布局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. 二.明白一个浏览器默认行为. 试

  • 关于meta viewport中target-densitydpi属性详解（推荐）

    关于meta viewport中target-densitydpi属性详解（推荐）

    前段时间在做WAP页面,发现页面设置了meta viewport中的大众属性,即: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >  但发现页面依旧不根据手机屏幕进行自动缩放,后来找其他同事帮忙解决了,我看了源代码发现了是在原来的viewport中增加了target-densitydpi属性.看之初不太了解,也因为当时自己手

  • 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

  • JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

    手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率 var u

  • 浏览器缩放检测的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

  • jQuery实现响应浏览器缩放大小并改变背景颜色

    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

  • 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实现控制图片显示大小的方法【图片等比例缩放功能】

    本文实例讲述了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控制安卓手机

    教你用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

随机推荐