原创

网页制作 手机端与PC端兼容

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m_syndra/article/details/80012155

网页制作——手机端与PC端兼容

手机端与PC端使用一套代码时,随屏幕分辨率的大小变化,会产生媒体查询并实现手机端与PC端的切换

(一套代码)

<meta http-equir=”Cache-control”content=”no-transform”/>

<meta http-equir=”Cache-control”content=”n-siteapp”/>

<meta name=”viewport” content=”maximum-scale=5.0,minimum-scale=1.0,user-scalable=no”>

用JavaScript代码判断使用端是什么

if( !IsPC){    //flag为false才进if,即为手机端时,才加上<link>的媒体查询的css样式

         varstr=”<link rel=’stylesheet’ href=’./css/medial.css’/>”;

         document.getElementsByTagName(“head”)[0].innerHTML+= str;

}

function IsPC(){

         varuserAgentInfo = navigator.userAgent;     // navigator.userAgent返回的是Netscape

         varAgents = [“Android”,”iPhone”,”SymbianOS”,”windows Phone”,”iPod”,”iPad”];

         varflag = true;

         for(varv=0;v<Agents.length;v++){

         if(userAgentInfo.indexOf(Agents[v]>0)){

         flag = false;     //为手机端,将flag改为false,并返回flag值

         break;

}

}

return flag;

}

展开阅读全文

微信页面的下拉刷新,兼容手机PC

02-27

之前只弄过滚动条滚到底部自动加载下一页,引入了一个别人写的infinite.jsnn现在功能是要类似于QQ聊天那样的到达顶部触发加载之前的聊天内容,自己试着写了一下,感觉写的好复杂,求助nn我写的JSnn var system = n win : false, n mac : false, n xll : false n ; n //检测平台 n var p = navigator.platform; n system.win = p.indexOf("Win") == 0; n system.mac = p.indexOf("Mac") == 0; n system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); n n if(system.win||system.mac||system.xll) n window.onload = function () n n function onMouseWheel(ev) /*当鼠标滚轮事件发生时,执行一些操作*/ n var ev = ev || window.event; n var scrollTop=$(window).scrollTop();n if(scrollTop == 0)n if(chat_page < chat_totalPages) n getChatList(++chat_page);n else n return;n n n if(ev.preventDefault)/*FF 和 Chrome*/ n ev.preventDefault();// 阻止默认事件 n n return false; n n addEvent(document.body,'mousewheel',onMouseWheel); n addEvent(document.body,'DOMMouseScroll',onMouseWheel); n n function addEvent(obj,xEvent,fn) n if(obj.attachEvent) n obj.attachEvent('on'+xEvent,fn); n else n obj.addEventListener(xEvent,fn,false); n n n else n $(document.body).infinite().on("infinite", function() n if(chat_loading) return;n chat_loading = true;n n setTimeout(function() n if(chat_page < chat_totalPages) n getChatList(++chat_page);n else n return;n n chat_loading = false;n , 500); //模拟延迟n ); n ninfinite.jsnn复制代码n/* ===============================================================================n************ Infinite ************n=============================================================================== */n/* global $:true */n+function ($) n "use strict";n n $.fn.scrollHeight = function() n return this[0].scrollHeight;n ;nn var Infinite = function(el, distance) n this.container = $(el);n this.container.data("infinite", this);n this.distance = distance || 50;n this.attachEvents();n nn Infinite.prototype.scroll = function() n var container = this.container;n var offset = container.scrollHeight() - ($(window).height() + container.scrollTop());n if(offset <= this.distance) n container.trigger("infinite");n n nn Infinite.prototype.attachEvents = function(off) n var el = this.container;n var scrollContainer = (el[0].tagName.toUpperCase() === "BODY" ? $(document) : el);n scrollContainer[off ? "off" : "on"]("scroll", $.proxy(this.scroll, this));n ;n Infinite.prototype.detachEvents = function(off) n this.attachEvents(true);n nn var infinite = function(el) n attachEvents(el);n nn $.fn.infinite = function(distance) n return this.each(function() n new Infinite(this, distance);n );n n $.fn.destroyInfinite = function() n return this.each(function() n var infinite = $(this).data("infinite");n if(infinite && infinite.detachEvents) infinite.detachEvents();n );n nn($); 问答

没有更多推荐了,返回首页

博客模板©2019 由CSDN提供 模版主题为:skin3-template by CSDN官方博客 设计