手机网页Html代码实现(解决显示页面很小的问题)
工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录!
其实主要就是改掉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代码实现(解决显示页面很小的问题)的更多相关文章
- 【问题&解决】手机网页Html代码实现(解决显示页面很小的问题)
工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport ...
- HTML5做手机站页面字体显示很小的解决方法
HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...
- 用手机自带uc浏览器查看静态页面,css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
- thinkphp从数据库里的html代码显示页面不解析
首先,这个问题不应该出现在这里,因为以前在用ThinkPHP3.1.2的时候,利用富文本编辑器保存文本后,直接从数据库里面取出的数据都能正常显示,改用ThinkPHP3.2.3之后,thinkphp从 ...
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...
- 三行代码实现.NET MVC统计显示页面的执行时间 超简单的实现方法 分析页面执行效率
三行代码实现.NET MVC统计显示页面的执行时间 超简单的实现方法 分析页面执行效率 博客页脚处添加了页面执行时间统计显示,如下图所示,也可以直接查看网页页脚处. 实现方法非常简单,只需三行代 ...
- 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法
关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...
- 分页复用代码【Page类、JSP显示页面】
前言 为了复用,记载一些以前写过的工具类.方法 page类 import java.util.List; /** * Created by ozc on 2017/3/1. */ public cla ...
- mp4网页播放代码,有声音无图像的解决办法~
mp4网页播放代码,有声音无图像的解决办法~ 关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github ...
随机推荐
- MUI-最接近原生App体验的前端框架
MUI:让HTML5达到原生体验的高性能开源框架 UI组件 HelloMUI HTML5+开发移动app教程3-mui开发示例
- cocos2d-x3.3 以前版本 工程Xcode6编译时的问题
Undefined symbols for architecture i386: "_fwrite$UNIX2003", referenced from: _unixErrorHa ...
- [转载]Javascript异步编程的4种方法
NodeJs的最大特性就是"异步" 目前在NodeJs里实现异步的方法中,使用“回调”是最常见的. 其实还有其他4种实现异步的方法: 在此以做记录 --- http://www.r ...
- HTML标签界里不会再用到的标签属性(一)
为了成为一名初级前端开发工程师,最近正在探寻HTML标签的众多奥秘,果不其然,让我发现了许多被“冷落”了的标签属性. 一.<!DOCTYPE> 自从HTML5流行之后,<!DOCTY ...
- 理解CSV文件以及ABAP中的相关操作
在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q124-Q127)
Question 124 You are designing a SharePoint 2010 application. You need to design a single feature t ...
- Android Log Tag含义
在分析Android问题的时候重要的手段之一就是分析log,在events.log中有很多系统log,其中有些log的含义并不是很了解,下面就是从安卓源码中得到的系统log的tag. 关于Tag的说明 ...
- 会话技术( Cookie ,Session)
会话技术: 会话:浏览器访问服务器端,发送多次请求,接受多次响应.直到有一方断开连接.会话结束. 解决问题:可以使用会话技术,在一次会话的多次请求之间共享数据. ...
- iOS 学习 - 20 UICollectionView 移动 Item ,类似背包
有100个 item,数据源只有20个,只能在 20 个之间移动,防止 item 复用,出现 bug 方法一:苹果自带 //UICollectionViewDataSource- (BOOL)coll ...
- 【android 开 发 】 - Android studio 下 NDK Jni 开发 简单例子
Android 开发了一段时间,一方面 ,感觉不留下点什么.有点对不起自己, 另一方面,好记性不如烂笔头,为了往后可以回头来看看,就当做是笔记,便决定开始写博客.废话不多说 ! 今天想搞一搞 ndk ...