制作手机浏览器显示格式的HTML页面
最近要推出手机支持访问的HTML页面效果,而这在制作手机页面的过程中状况连连。 主要一下就我制作的工程中所遇的问题说明一下:
1. 改掉HTML页面声明:(以往大部分页面都是HTML4.0的声明) 还有很多参数可以配置大家可以google一下
<!DOCTYPE HTML>
<html>
<head>
<meta content="width=device-width,user-scalable=no" name="viewport">
2. 关于img标签的问题,可能会有些图片大小显示不一
暂时只能用width:100%属性解决(height最好别写,不然图片上下左右拉伸,失真的厉害)。 忘大神告诉更牛逼的办法
3. 关于head头部LOGO居中显示的问题
大家可以参考网易手机新闻制作的页面
下面是对head头部的图片进行居中显示的CSS
.tou{display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;margin-top: 10px;}
.o{display: -webkit-box;height: 56px;width: 320px;background-size: 320px auto;background-repeat: no-repeat;background-image: url("/image/feihei_head.png");}
HTML标签
<div class="tou">
<a href="http://m.nubb.com/app/ihwr_1.1.7.apk" class="o"></a>
</div>
最后出来的效果类似于网易新闻那链接里的

制作手机浏览器显示格式的HTML页面的更多相关文章
- 拦截器的使用,配置手机浏览器访问的h5页面
package com.thinkgem.jeesite.modules.sys.interceptor; import javax.servlet.http.HttpServletRequest; ...
- 通过手机浏览器打开APP或者跳转到下载页面.md
目录 通过手机浏览器打开APP或者跳转到下载页面 添加 schemes 网页设置 参考链接 通过手机浏览器打开APP或者跳转到下载页面 以下仅展示最简单的例子及关键代码 由于硬件条件有限,仅测试了 A ...
- 微信中打开链接,自动打开外部浏览器打开指定URL页面
上半年公司有一个新的APP项目上线,我们在项目首页做个二维码,然后用户用手机扫一扫就能下载了.但是很多用户反映扫一扫之后下载不了,了解之后才知道这些用户都是使用的微信的扫一扫,而我们开发测试人员一般使 ...
- NopCommerce 根据手机浏览器和桌面浏览器切换 Theme
自从 NopCommerce 升级到 3.x 以来,默认的 ViewName.Mobile.cshtml 方式就被响应式的默认 Theme 取代了. 但是在今天各种手机专用前端库大行其道的情况下,响应 ...
- 在PC上测试移动端网站和模拟手机浏览器的5大方
查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...
- 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...
- 使用视 meta 标签来控制手机浏览器布局
移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...
- 帝国cms制作手机网站
1.操作前,我们需要先对网站数据库进行备份. 接下来我们添加手机站的模板组.点击"模板", 选择"模板组管理"中的"导入/导出模板组",然后 ...
- iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示
iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端. 打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面. ...
随机推荐
- SharePoint Dialog 使用
SharePoint中弹出模态窗口对体验提高太大了 方法为: 父页面中调用子页面: function showDialog() { var options = { ...
- (转)教你如何使用php session
PHP session用法其实很简单它可以把用户提交的数据以全局变量形式保存在一个session中并且会生成一个唯一的session_id,这样就是为了多了不会产生混乱了,并且session中同一浏览 ...
- 在jsp中用EL 表达来获取表单中的参数
在一个JSP页面转到另一个JSP页面时,对表单中的参数用EL表达式提取为: <form action="sampleJsp.jsp" method="po ...
- eclipse EE neon创建dynamic web project时,卡在installing dynamic web module facet,解决办法
我们在用eclipse EE neon创建dynamic web project时,如果你发现底部状态栏一直卡在installing dynamic web module facet,永远到不了100 ...
- 流形(Manifold)初步【转】
转载自:http://blog.csdn.net/wangxiaojun911/article/details/17076465 欧几里得几何学(Euclidean Geometry) 两千三百年前, ...
- 343. Integer Break -- Avota
问题描述: Given a positive integer n, break it into the sum of at least two positive integers and maximi ...
- 求LR(0)文法的规范族集和ACTION表、GOTO表的构造算法
原理 数据结构 // GO private static Map<Map<Integer,String>,Integer> GO = new HashMap<Map< ...
- Jquery获取元素坐标
获取页面某一元素的绝对X,Y坐标,相对于浏览器窗体,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offse ...
- mysql基本介绍和优化技巧
一. mysql框架和基本介绍 1. 框架图 更详细: 2. 存储引擎 MYISAM与INNODB对比: MYISAM:mysql5.1及以前版本的默认存储引擎.支持全文检索,压缩,表级锁等,但不支持 ...
- CSS2简写代码(优化)
[1]如果CSS属性值为0,那么你不必为其添加单位(如:px/em): 下面是你可能的写法: padding: 10px 5px 0px 0px; 但是你可能这样写: padding: 10px 5p ...