通过viewport实现jsp页面支持手机缩放

要加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> 标签

其中个属性的意思：

width ：- viewport的宽度
height： - viewport的高度
initial-scale： - 初始的缩放比例
minimum-scale： - 允许用户缩放到的最小比例
maximum-scale： - 允许用户缩放到的最大比例
user-scalable： - 用户是否可以手动缩放

赞 (0)

相关推荐

  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • 关于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属性.看之初不太了解,也因为当时自己手

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

  • 关于viewport,Ext.panel和Ext.form.panel的关系

    Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局 下面是我写的一个小例子,顶级容器不是viewport而是tabpanel 复制代码 代码如下: //一个普通的表单 var frm = new Ext.form.FormPanel({ defaultType: 'textfield', labelAlign: 'right', title: 'form1-center', labelWidth: 50, frame:

  • 通过viewport实现jsp页面支持手机缩放

    要加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> 标签 其中个属性的意思: width :- viewport的宽度 height: - viewport的高度 initial-scale: - 初始的缩放比例 minimum-scale: -

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

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

  • HTML5 移动页面自适应手机屏幕宽度详解

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

  • jsp页面 列表 展示 ajax异步实现方法

    1. 服务端先返回页面基本结构(如message.jsp), <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ tag

  • 详解Struts2中对未登录jsp页面实现拦截功能

    Struts2中拦截器大家都很经常使用,但是拦截器只能拦截action不能拦截jsp页面.这个时候就有点尴尬了,按道理来说没登录的用户只能看login界面不能够通过输入URL进行界面跳转,这显然是不合理的.这里介绍Struts2中Filter实现jsp页面拦截的功能.(有兴趣的人可以去研究Filter过滤器的其它用法,因为利用过滤器也可以实现action拦截的功能) 下面直接上代码,边看边分析实现步骤和原理. 1.web.xml中的配置信息: <filter> <filter-name&

  • ajax 提交数据到后台jsp页面及页面跳转问题

    ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给logincheck.jsp $.ajax({ type : "POST", url : baseUrl+"m/m

  • 详解直接访问WEB-INF目录下的JSP页面的方法

    WEB-INF目录下的JSP页面不能通过地址栏直接访问,WEB-INF目录下的文件不能直接被访问主要是出于安全考虑,当然如果不用考虑安全性的话,你可以直接把JSP页面放到WEB-INF外的webapp目录下,这样也可以直接访问.下面说下如何直接访问WEB-INF目录下的jsp页面 可以通过转发的方式访问,我用的是Controller来进行转发,如下: package com.sogou.baike.controller; import org.apache.log4j.Logger; impor

  • jsp页面中表达式语言中的$符号不起作用的解决方法

    今天myeclipse里部署了之前做的一个测试项目,发现jsp里的$符号tomcat启动后页面上显示出来了,百度搜了下别人也有类似的问题出现过.经提醒原来是web.xml配置的version设置的是2.5而我tomcat5启动的.是tomcat的版本低于web的版本,从而导致$符号不能正常使用. 后将tomcat5改用tomcat6.jdk采用1.6 启动spring2.5项目.$显示问题解决. 以下是网上摘录的详细说明: 在jsp页面中用表达式语言中的$符号,如${pageScope.titl

  • 请求转发jsp页面乱码问题的快速解决方法

    •在最近的项目中 使用了jsp+servlet来开发项目,但是由于后台的不太熟练 导致了困难重重.所幸 学习能力还可以 一边做一遍学吧. •今天的问题:请求转发后页面的乱码问题 •由于特殊原因--图片上传的form表单无法通过ajax提交 因此必须使用form表单直接提交.但是这样会导致一个问题:前后台交互的时候效果不好.为什么效果不好?这里说的不是功能的问题.作为web开发者,客户的体验我们要放在第一位.因此,我们必须将对客户的信息反馈放在一个比较重要的地位.说白了,就是上传个图片成没成功?我

  • 如何让你的Lightbox支持滚轮缩放及Base64图片

    在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件.配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放图片, 1.修改Lightbox源码使支持滚轮缩放 支持鼠标滚轮主要就是把弹出后的框整个绑定上mousewheel事件,打开lightbox.js,找到Lightbox.prototype.build = function() {...}这一段,可以在这里(lightbox初始化的时候)把想要的滚轮

随机推荐