JS判断手机横竖屏】的更多相关文章

在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientation值: ipad或iPhone: 90 或 -90 横屏ipad或iPhone: 0 或180 竖屏Andriod:0 或180 横屏Andriod: 90 或 -90 竖屏 使用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法 function direction…
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>手机横.竖屏事…
var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initial_orientation_is_landscape, initial_orientation_is_default, portrait_map = { "0": true, "180": true }, ww, wh, landscape_threshold; if(…
@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : portrait){ h2{color:green;}/*竖屏时字体绿色*/ }…
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationchange,进行执行就可以了. //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==…
js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orientation'); alert('横屏内容太少啦,请使用竖屏观看!'); obj.style.display='block'; } window.onorientationchange=function(){ var obj=document.getElementById('orientation');…
做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: <script type="text/javascript"> //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(navigator.userAgent)){ docu…
$.fn.screenCheck = function() { var pDiv = $('<div></div>'); pDiv.addClass("screenCheck"); pDiv.attr("id","screen") pDiv.css({ "display": "none", "width": "100%", "heig…
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 针对上面的viewport标签有如下说明: 1).content 中的width指的是虚拟窗口的…
本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切换依然还是影响用户体验的一个重点(在网页中,竖屏的用户体验显然是高于横屏的). 使用 orientation 判断横竖屏 我们可以通过 JS 的 window.orientation 来判断当前网页窗口的方向 <script type="text/javascript"> fu…
方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好) (function () { var updateOrientation = function () { var orientation = (window.innerWidth > window.innerHeight)? 'landscape' : 'portrait'; if(orientation === 'landscape'){ //横屏 } else if(orientation === 'portr…
//判断手机浏览器 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), isAndroid = ua.match(/(Android)\s+([\d.]+)/), isMobile = isIphone || isAndroid; if(isIphone || ipad){//如果是…
function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new Date(); window.setTimeout(function() { var timeOutDateTime = new Date(); if(timeOutDateTime - loadDateTime < 5000) { window.location = "要跳转的下载app页面…
实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预览,要通过<iframe>标签,左边选择不同的select选项,通过监听select选项的值,在js中动态改变iframe的src来实现: 因为要实现横屏和竖屏的预览,切记,千万不能在点击横屏的时候,把竖屏的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖屏的,只是页面跟着一起旋转了90…
function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90: // Landscape: turned 90…
原理:原理有两个,第一:通过游览器(browser)判断是否是手机:第二:通过访问终端判断是否是手机(userAgent):但是通常考虑到兼容性,需要这两种原理同时使用:具体的实现如下: JS实现: function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u…
这里提供了六种让手机端访问网站跳转到手机端的方法: 第一种: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //window.location.href="电脑网址"; }else{ //shouji window.location.href="手机网址"; } </script> 第二种: <script type="text/javascript&qu…
当用户访问你网站时,如果是PC端访问,则不作处理,如果是手机或者平板访问,就跳转到自己定义的手机页面去,这个在做webapp的时候经常用到,把代码分享给大家,希望对大家有所帮助. 首先,你要在页面中引用一个jsuaredirect.js,js源码如下: function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;if(arguments[1]){var e=windo…
function check() { let browser = navigator.userAgent;//用户访问的类型 let phone = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];//移动端类型 let type = true; for (let i = 0; i < phon…
<script type="text/javascript"> $(document).ready(function(e) { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/…
当用户使用手机等移动终端访问网站时,我们可以通过程序检测用户终端类型,如果是手机用户,则引导用户访问适配手机屏幕的移动站点.本文将介绍分别使用PHP和JAVASCRIPT代码判断用户终端类型. PHP版 我们使用PHP的$_SERVER['HTTP_USER_AGENT']来获取手机用户浏览器的用户代理,然后匹配已有的各种手机浏览器代理库,如果含有匹配的关键字,则判断为手机(移动终端)用户. function is_mobile() { $user_agent = $_SERVER['HTTP_…
uaredirect.js function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;if(arguments[1]){var e=window.location.host;var a=window.location.href;if(isSubdomain(arguments[1],e)==1){f=f+"/#m/"+a;b=true}else{…
js代码 $(function() { function judge() { var startx;//让startx在touch事件函数里是全局性变量. var endx; var el = document.getElementById('io');//触摸区域. function cons() { //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据. if (startx > endx) { //判断左右移动程序 alert("left"); } else…
第一种:直接JS脚本 <script type="text/javascript">try {var urlhash = window.location.hash;if (!urlhash.match("fromapp")){if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))){window.location="http://www.laozuo.org(更换成自…
第一种方法: <script> ){ //pc //window.location.href="电脑网址"; }else{ //shouji window.location.href="手机网址"; } </script> 第二种方法: <script type="text/javascript"> function browserRedirect() { var sUserAgent= navigator.u…
<script language="javascript"> window.onload = function () { var n = navigator.userAgent; if (n.indexOf('Android') > -1 || n.indexOf('Linux') > -1) { console.log("安卓手机"); } else if (n.indexOf('iPhone') > -1) { console.lo…
<script src="~/Web/js/jquery-1.10.1.min.js"></script> <script> $(function () { window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "/Mobile/index.html" : "/Home/WebIndex&quo…
我们通过浏览器内置的userAgent来判断手机机型. 具体代码如下: var u = navigator.userAgent, app = navigator.appVersion; if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|Son…
function fun() { var realname = document.getElementById("realname"); var telephone = document.getElementById("telephone"); var email = document.getElementById("email"); // 邮箱格式正则表达式 var emailPattern =/^([a-zA-Z0-9_-])+@([a-zA…
html: <h1 class="downlink"> 前往 </h1> js: document.addEventListener('DOMContentLoaded', function () { document.querySelector('.downlink').addEventListener('click', function () { openApp() }, false) }, false) ;function openApp(){ var u…