工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录!

其实主要就是改掉HTML页面声明:

在网页中加入以下代码,就可以正常显示了:

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

解释:

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

精简点的话,可以把上面的代码更改为以下代码,效果是一样的:

<meta content="width=device-width,user-scalable=no" name="viewport">

最后就是不要设置太大的具体宽度属性了,比如你在网页把Body的宽度属性设为1000px,这肯定是不行的了,但是可以设置为90%,这是屏幕自适应的。

页面来自:http://www.cnblogs.com/yc-755909659/p/3605214.html

手机网页Html代码实现(解决显示页面很小的问题)的更多相关文章

  1. 【问题&解决】手机网页Html代码实现(解决显示页面很小的问题)

    工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport ...

  2. HTML5做手机站页面字体显示很小的解决方法

    HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...

  3. 用手机自带uc浏览器查看静态页面,css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  4. thinkphp从数据库里的html代码显示页面不解析

    首先,这个问题不应该出现在这里,因为以前在用ThinkPHP3.1.2的时候,利用富文本编辑器保存文本后,直接从数据库里面取出的数据都能正常显示,改用ThinkPHP3.2.3之后,thinkphp从 ...

  5. AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...

  6. 三行代码实现.NET MVC统计显示页面的执行时间 超简单的实现方法 分析页面执行效率

    三行代码实现.NET MVC统计显示页面的执行时间 超简单的实现方法 分析页面执行效率    博客页脚处添加了页面执行时间统计显示,如下图所示,也可以直接查看网页页脚处. 实现方法非常简单,只需三行代 ...

  7. 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法

    关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...

  8. 分页复用代码【Page类、JSP显示页面】

    前言 为了复用,记载一些以前写过的工具类.方法 page类 import java.util.List; /** * Created by ozc on 2017/3/1. */ public cla ...

  9. mp4网页播放代码,有声音无图像的解决办法~

    mp4网页播放代码,有声音无图像的解决办法~     关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github ...

随机推荐

  1. 十一个行为模式之模板方法模式(Template Method Pattern)

    定义: 定义一个操作中算法的框架,并且将一部分操作延迟到子类当中.使得子类可以不改变一个算法的结构即可重新定义算法步骤. 结构图: AbstractClass:抽象方法类,定义了一些基本操作,这些操作 ...

  2. CSS3——3D翻转相册

    transform属性和transition过渡属性,结合jQuery代码实现翻转功能. <!DOCTYPE html> <html lang="en"> ...

  3. Sublime Text 2 windows8安装插件失败解决

    事件是这样的: 1.安装Package Control组件后, 2.调出Install Package选项安装插件,状态栏显示成功, 3.但打开Packages目录也看不到,Sublime插件管理也没 ...

  4. 学习zepto.js(对象方法)[6]

    first: 获取当前对象集合中的第一个dom元素. $("div").first(); // 返回第一个div对象(zepto对象) //相当于$("div" ...

  5. EF DI & MVC

    The Repository Pattern with EF Code First & Dependency Injection in ASP.NET MVC3 Ray_Liang, 5 Ju ...

  6. [Android]Google 开源的 Android 排版库:FlexboxLayout

    最近Google开源了一个项目叫「FlexboxLayout」. 1.什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方 ...

  7. iOS多线程之3.NSThread的线程间通信

      我们把一些耗时操作放在子线程,例如下载图片,但是下载完毕我们不能在子线程更新UI,因为只有主线程才可以更新UI和处理用户的触摸事件,否则程序会崩溃.此时,我们就需要把子线程下载完毕的数据传递到主线 ...

  8. 《java数据结构和算法》读书笔记

    大学时并不是读计算机专业的, 之前并没有看过数据结构和算法,这是我第一次看.         从数据结构方面来说:                数组:最简单,遍历.查找很快:但是大小固定,不利于扩展 ...

  9. 关于UIScollView 中的contentOffset 的理解

    大家对UIScollView 中的contentOffset 一直有疑问, 虽然看是一个简单的问题, 实际上并不简单. 当时我也有好多疑问, 后来在网上找了一下资料, 发现没有找到合理的解释, 因此自 ...

  10. Android客户端与Eclipse服务器端的Socket通信

    Server端代码 用来实现客户端socket的监听 package MyServer; import java.io.BufferedReader; import java.io.BufferedW ...