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

其实主要就是改掉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. 使用java操作MongoDB

    1.环境准备 下载mongoDB对Java支持的驱动包 驱动包下载地址:https://github.com/mongodb/mongo-java-driver/downloads 2.查询集合中所有 ...

  2. 纯CSS3魔方的制作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. SE16N使用方案总结

    SAP中直接修改表.视图的Tcode有SE16N和SM30. 另外,在EHP5版本及其更高的版本中,激活编辑功能是不被允许的,不过程序中是通过一个判断语句来限制的,可以通过将相关的判断值判断前加断点, ...

  4. jeecg环境搭建20160707

    1.首页修改位置:src/main/webapp/webpage/main 2.tomcat45秒超时启动修改,open打开servers项目,在右上角处的timeouts参数修改: 3.eclips ...

  5. reason: Attempted to dereference an invalid ObjC Object or send it an unrecognized selector.

     album = responseObject[@"album"]; 是我将一个字典直接赋值给了对象 改为如下即可 [album setValuesForKeysWithDicti ...

  6. Android中asset和raw的区别

    :assets 文件夹是存放不进行编译加工的原生文件,即该文件夹里面的文件不会像 xml, java 文件被预编译,可以存放一些图片,html,js, css 等文件.

  7. PHP设计模式 迭代器模式

    迭代器模式,在不需要了解内部实现的前提下,遍历一个聚合对象的内部元素.相比于传统的编程模式,迭代器模式可以隐藏遍历元素所需要的操作. AllHacl.php <?php namespace Ba ...

  8. 如何在 ASP.NET 4.6 与 IIS10 中运用 HTTP/2 ?

    在过去十年中,Web 技术已经取得了种种进展.从基本的 HTML 开始,网页发展出更丰富的外观和感觉,变得更加直观,对用户更加友好并且越来越大放异彩.这些变化的关键贡献来自于一些新的和翻新技术,且借力 ...

  9. jar命令的用法详解

    本文详细讲述了JAR命令的用法,对于大家学习和总结jar命令的使用有一定的帮助作用.具体如下: JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有区别的,JAR包中 ...

  10. springMVC基础controller类

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:设置请求.响应对象:session.cookie操作:ajax访问返回json数据: 创建springMVC基础con ...