兼容手机端页面

(function(){
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write(‘<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=‘ + 1 + ‘,minimum-scale=‘ + 1 + ‘,maximum-scale=‘ + 1 + ‘">‘)
var iWidth = document.documentElement.clientWidth;
var iFontSize = iWidth/27.3;
document.getElementsByTagName("html")[0].style.fontSize=iFontSize+"px";
})();

时间: 2024-10-22 17:21:31

兼容手机端页面的相关文章

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

wap手机端页面根据dpr和宽度计算出font-size对应数值

最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下. wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度540px 系数 1 20px 33.75px 0.0625 2 40px 67.5px 0.125 3 60px 101.25px 0.1875 备注: 1.是按照倍数关系增加的 2.手机淘宝就是按

《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

手机端页面切图

针对手机端页面,通常情况下,需要对设计图片切两种图片. ①:dpr:2------切两倍图(即设计原图大小,因为设计图是按原来的手机尺寸放大两倍之后的)  一般保存为[email protected] ②:dpr:3------切三倍图(即设计原图大小的1.5倍,因为设计图是按原来的手机尺寸放大两倍之后的)     一般保存为[email protected] 淘宝的做法: 例如:设计图是720px的宽度. 由于设计图是放大两倍的.所以一倍的大小是=720/2 = 360px; 放大三倍图就是=

web前端课程技术内容之如何做一个简单的手机端页面的翻页

[如何做一个简单的手机端页面的翻页] 第一步:创建移动端页面内 HTML + CSS [注]可用弹性布局 但需要注意的是 外层盒子的定位 第二步: 思考问题 要实现怎样的效果? 1. 手指滑动时触发事件[左右]两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步:编写JS代码 添加监听事件 document.addEventListener('DOMContentLoaded',function(){ 创建一个数组用于调用数组属性值 或者

触动人心的手机端页面设计

随着网络越来越发达,智能手机迅速普及,现在手机端网络已经占据市场的70%.近两年,手机流量从2G一直升级到现在的4G,还有各地免费开放的WIFI.人们从一开始的电脑冲浪,已经大部分时间都转移到如今更加方便携带的手机冲浪上了.在国外,媒体发布了一项关于智能手机的调查报告,据Bistro报道,人们在使用智能手机的时候,有66%在家里,59%在旅途上,52%在乘坐交通工具上,38%在餐厅里,30%在商场里.而使用手机上网的时间,已经远远的超过了打电话的时间,手机带来的便利,使得越来越多的人注意到了手机

手机端页面rem自适应脚本

什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Le

手机端页面常用点

1.拨打电话  <a href="tel:4008001234" class="call"></a> 可唤起安卓与手机端的拨打电话 2.点击复制电话号 // let text = document.createElement('input'); //document.body.appendChild(text); //text.value = this.phoneNumber; let text = document.getElementBy