<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

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

 大 | 中 | 小  2012/08/25 17:51 , mdy 
Css 重构 , 评论(0) , 阅读(5969) , Via 本站原创 
Tags: wap页面自适应宽度 , 手机页面宽度 , wap
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  1. 在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
  2. 其中：
  3. width=device-width ：表示宽度是设备屏幕的宽度
  4. initial-scale=1.0：表示初始的缩放比例
  5. minimum-scale=0.5：表示最小的缩放比例
  6. maximum-scale=2.0：表示最大的缩放比例
  7. user-scalable=yes：表示用户是否可以调整缩放比例
  8. 如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
  9. [html] view plaincopy
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  11. 这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了
  1. html5开发的wap网站这三个分别代表什么含义？
  2. <meta name="MobileOptimized" content="240"/> //浏览器不会自动调整文件的大小,不会随着浏览器拉伸缩放。
  3. <meta name="apple-touch-fullscreen" content="YES" />"添加到主屏幕“后，全屏显示
  4. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. 如果内容设置为YES，Web应用程序运行在全屏模式;否则，它不会。默认行为是使用Safari浏览器显示网页内容

手机wap适配的更多相关文章

  1. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  2. 老李分享：android手机测试之适配（1）

    Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入的讲解了Android屏幕适配的原因.重要概念.解决方案及最佳实践,我相信如果你能认真的学习 ...

  3. 手机wap网站建设的方法和技巧

    随着互联网技术的不断进步,越来越多的运营商对于手机wap网站的建设有了更多的投入,手机wap网站的建设和开发要根据网站的特点和经营范围来进行设计和建设,这样才可以提升手机wap网站建设的效果.现在智能 ...

  4. 微信跳转，手机WAP浏览器一键超级跳转微信指定页面

    微信跳转,手机WAP浏览器一键超级跳转微信指定页面 这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下 先说第一种,最简单的唤起微信协议,weixin://主流 ...

  5. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  6. selenium+python自动化84-chrome手机wap模式（登录淘宝页面）

    前言 chrome手机wap模式登录淘宝页面,点击验证码无效问题解决. 切换到wap模式,使用TouchActions模块用tap方法触摸 我的环境 chrome 62 chromedriver 2. ...

  7. 【Android】Android中不同手机分辨率适配问题

    在项目开发的过程中,同一个布局对应不同的手机会显示出不同的效果.导致这个现象产生的原因是不同手机的分辨率不同.在android sdk提供的帮助文档中,我们可以看到各种手机的分辨率和对应的屏大小.QV ...

  8. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  9. php获得访问来源（手机wap访问、电脑web访问）

    为了更好的用户体验,本主题默认支持wap和web两种访问样式,wap访问将不包含任何脚本.样式也是重新撰写,不支持更多页面,只支持首页.详情页, 评论框.登录等内容将陆续更新到wap内容里.如果想测试 ...

随机推荐

  1. Hadoop: the definitive guide 第三版 拾遗 第四章

    第四章中提到了通过CompressionCodec对streams进行压缩和解压缩,并提供了示例程序: 输入:标准输入流 输出:压缩后的标准输出流 // cc StreamCompressor A p ...

  2. bash 脚本中分号的作用

    在Linux bash shell中,语句中的分号一般用作代码块标识 1.单行语句一般要用到分号来区分代码块.比如: weblogic@pmtest:/$if [ "$PS1" ] ...

  3. TrinityCore3.3.5环境搭建

    说起TrinityCore,可能知道的人不多,但是说起MaNGOS(芒果)知道的人应该就不少了.MaNGOS是一个魔兽私服服务器端,TrinityCore继承自TrinityCore并且做了优化,一直 ...

  4. 完美.PCK文件不完全详解

    building.pck:建筑物 configs.pck:配置文件interface.pck:玩过魔兽的都晓得这个是什么~interface顾名思义·facedata.pck,人物脸型,细节.不要改, ...

  5. WordPress主题开发：更换后台编辑器

    这里我更换为KindEditor 1.下载插件 https://wordpress.org/plugins/kindeditor-for-wordpress/ 2.解压至wordpress目录下的/w ...

  6. Linux学习19-gitlab配置邮箱postfix（新用户激活邮件）

    前言 gitlab新增新用户有两种方式,第一种可以用户主动注册(自己设置密码):第二种也可以通过root管理员用户直接添加用户,发个邮件到用户的邮箱里,收到邮件后激活. 如果是第二种方式添加新用户的话 ...

  7. 清除和新建WordPress数据库

    由于在本地已经安装过一次wordpress.所以假设第二次安装的时候 localhost/wp-admin/install.php 会显示你已经安装过了.所以须要把MySQL的数据库信息清除掉,或者另 ...

  8. 通过AnimationSet设置动画

    在代码中可以通过set来设置多个动画属性,这里分开来设置不同的属性. 首先先贴上布局文件,里面的imageview是用来做动画的控件 <RelativeLayout xmlns:android= ...

  9. verilog语法实例学习(7)

    常用的时序电路介绍 组合电路:这类电路的输出信号值仅却决于输入端信号值. 时序电路:时序电路的输出值不仅取决于当前的输入值,还取决于电路的历史状态,所以时序逻辑电路中包含保存逻辑信号值的存储元件,存储 ...

  10. [leetcode]Next Permutation @ Python

    原题地址:https://oj.leetcode.com/problems/next-permutation/ 题意: Implement next permutation, which rearra ...