`

分享10个关于web移动开发的实用原生JavaScript代码

阅读更多

这段时间用惯了jquery就很少写原生JavaScript代码,今天整理了10个实用的移动开发方面的js脚本分享给大家,希望对大家有帮助 。

 

31、原生JavaScript判断是否移动设备

function isMobile(){
	if (typeof this._isMobile === 'boolean'){
		return this._isMobile;
	}
	var screenWidth = this.getScreenWidth();
	var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport;
	var fixViewPortsExperimentRunning = fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase() === "new");
	if(!fixViewPortsExperiment){
		if(!this.isAppleMobileDevice()){
			screenWidth = screenWidth/window.devicePixelRatio;
		}
	}
	var isMobileScreenSize = screenWidth < 600;
	var isMobileUserAgent = false;
	this._isMobile = isMobileScreenSize && this.isTouchScreen();
	return this._isMobile;
}


32、原生JavaScript判断是否移动设备访问

function isMobileUserAgent(){
	return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
}


33、原生JavaScript判断是否苹果移动设备访问

function isAppleMobileDevice(){
	return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase()));
}


34、原生JavaScript判断是否安卓移动设备访问

function isAndroidMobileDevice(){
	return (/android/i.test(navigator.userAgent.toLowerCase()));
}


35、原生JavaScript判断是否Touch屏幕

function isTouchScreen(){
	return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}


36、原生JavaScript判断是否在安卓上的谷歌浏览器

function isNewChromeOnAndroid(){
	if(this.isAndroidMobileDevice()){
		var userAgent = navigator.userAgent.toLowerCase();
		if((/chrome/i.test(userAgent))){
			var parts = userAgent.split('chrome/');

			var fullVersionString = parts[1].split(" ")[0];
			var versionString = fullVersionString.split('.')[0];
			var version = parseInt(versionString);

			if(version >= 27){
				return true;
			}
		}
	}
	return false;
}


37、原生JavaScript判断是否打开视窗

function isViewportOpen() {
	return !!document.getElementById('wixMobileViewport');
}


38、原生JavaScript获取移动设备初始化大小

function getInitZoom(){
	if(!this._initZoom){
		var screenWidth = Math.min(screen.height, screen.width);
		if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){
			screenWidth = screenWidth/window.devicePixelRatio;
		}
		this._initZoom = screenWidth /document.body.offsetWidth;
	}
	return this._initZoom;
}


39、原生JavaScript获取移动设备最大化大小

function getZoom(){
	var screenWidth = (Math.abs(window.orientation) === 90) ? Math.max(screen.height, screen.width) : Math.min(screen.height, screen.width);
	if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){
		screenWidth = screenWidth/window.devicePixelRatio;
	}
	var FixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport;
	var FixViewPortsExperimentRunning = FixViewPortsExperiment && (FixViewPortsExperiment === "New" || FixViewPortsExperiment === "new");
	if(FixViewPortsExperimentRunning){
		return screenWidth / window.innerWidth;
	}else{
		return screenWidth / document.body.offsetWidth;
	}
}


40、原生JavaScript获取移动设备屏幕宽度

function getScreenWidth(){
	var smallerSide = Math.min(screen.width, screen.height);
	var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport;
	var fixViewPortsExperimentRunning = fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase() === "new");
	if(fixViewPortsExperiment){
		if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){
			smallerSide = smallerSide/window.devicePixelRatio;
		}
	}
	return smallerSide;
}

 

 

0
0
分享到:
评论

相关推荐

    Tabrisjs是一个使用JavaScript开发移动原生UI的框架

    这一框架的独特之处在于,它将JavaScript代码与移动设备的原生API相结合,实现了真正的混合移动开发。 1. **JavaScript开发**: Tabris.js的核心是JavaScript,这意味着开发者可以使用ES6、TypeScript或任何...

    《移动Web前端高效开发实战》书籍源码

    《移动Web前端高效开发实战》是一本专注于提升移动端Web应用开发效率的专业书籍,其源码提供了丰富的实践案例和代码示例,旨在帮助开发者掌握在移动设备上构建高性能、响应式和用户友好的Web应用的技巧。书中涉及的...

    移动WEB前端高级开发项目实战_混合式开发_编程案例解析实例详解课程教程.pdf

    混合式开发的理念综合了原生和web开发的特性,通常定义为开发一个在原生容器使用Web技术的混合式应用。原先的混合式开发,在理念上保持着使用HIML、CSS、Javascript的体系结构在 Webview中执行的概念,但在现阶段,web...

    Javascript和android原生互调,代码简洁易懂,能运行

    JavaScript与Android原生互调是移动应用开发中的一个重要技术领域,尤其在混合应用开发中,它使得Web开发者能够利用Android的设备功能,同时保持Web应用的便捷性和跨平台性。本教程将深入探讨这一主题,讲解如何实现...

    移动开发的代码

    AppCan是一款流行的国产跨平台移动应用开发工具,它允许开发者使用HTML5、CSS3和JavaScript等Web技术来构建原生的移动应用。通过AppCan,开发者可以快速地创建出适用于iOS和Android的应用,并实现与原生功能的深度...

    移动开发多平台代码共享文章的Demo

    在移动开发领域,多平台代码共享是一个至关重要的议题,它旨在提高开发效率,减少重复工作,并维护一致性。本文将深入探讨如何实现跨平台的代码共享,以适应Android和iPhone(iOS)两大主流移动操作系统。我们将基于...

    原生JavaScript飞机大战

    《原生JavaScript飞机大战》是一款基于JavaScript开发的经典小游戏,它为初学者提供了一个良好的实践平台,帮助提升JavaScript编程技能。这款游戏虽然功能相对简单,但涵盖了基础的编程概念和技巧,对于学习...

    H5web app移动开发

    在现代互联网技术中,H5 Web App已经成为移动应用开发的重要组成部分。这种技术允许开发者通过HTML5、CSS3和JavaScript创建跨平台的移动应用程序,无需针对iOS或Android等特定操作系统进行原生开发。以下是对给定...

    React Native 用JavaScript开发移动应用.pdf

    React Native 是一个由 Facebook 开发的开源移动应用框架,允许开发者使用 JavaScript 和 React 构建原生移动应用。React Native 不仅允许开发者为 iOS 和 Android 平台创建应用,还能共享大部分的代码基础,这对于...

    Android原生代码与Web HTML5数据交换研究.pdf

    例如,在Android原生代码中,通过在Activity的onCreate()方法中调用addJavascriptInterface()方法,将一个Activity对象映射到JavaScript的login对象,从而使得HTML页面中的JavaScript代码可以访问到Android原生代码...

    Titanium使用JavaScript来开发原生iOSAndroid和Windows应用

    Titanium是一个开源的移动开发框架,它允许开发者使用JavaScript语言来构建原生的iOS、Android以及Windows应用程序。这个框架的核心理念是提供一个跨平台的解决方案,让开发者可以用一种语言编写代码,然后在多个...

    VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架

    这种技术被称为混合移动开发,因为它结合了Web开发的便利性和原生移动开发的性能优势。 在JavaScript开发中,Vue Native支持ES6语法,包括箭头函数、类、模板字符串等现代特性,这使得代码更加简洁易读。此外,它还...

    移动互联网应用开发课堂笔记,web应用开发必备

    移动互联网应用开发不仅限于Web应用,还包括原生应用的开发,如使用Android Studio和iOS的Swift或Objective-C。笔记可能讨论了跨平台框架,如React Native或Flutter,它们允许开发者用一种语言编写代码,同时在多个...

    《移动WEB前端高级开发实践》PDF

    《移动WEB前端高级开发实践》这本书是针对移动Web前端开发者的一本高级教程,旨在深入探讨在移动设备上构建高效、响应式和优化的Web应用的关键技术与实践。书中的内容涵盖了移动Web前端开发的各个方面,从基础概念到...

    原生 javascript 弹层弹窗弹幕web应用解决方案xtiper-master.zip

    "xtiper-master.zip"这个压缩包文件提供了一个原生JavaScript实现的弹层弹窗弹幕解决方案,它可以帮助开发者在web应用中创建自定义的交互体验,而无需依赖外部库如jQuery或者其他重型框架。 首先,我们要理解“原生...

    从0到1 实战朋友圈移动Web App开发.rar

    在本资源"从0到1 实战朋友圈移动Web App开发.rar"中,我们可以深入学习如何构建一个完整的移动Web应用程序,特别是在微信朋友圈环境下的应用。移动Web开发是当前互联网技术领域中的一个重要分支,它涉及到多种技术和...

    移动前端开发收藏夹移动web开发技巧

    本文将围绕“移动前端开发收藏夹”和“移动Web开发技巧”这两个核心主题,深入探讨JavaScript在混合移动开发中的应用,以及如何优化移动端网页的性能和用户体验。 首先,我们要理解移动Web开发的挑战。与桌面端相比...

    HTML5 移动WEB开发指南

    HTML5 移动Web开发是现代互联网应用的重要组成部分,它为开发者提供了丰富的功能和更强的交互性,使得在手机和平板等移动设备上构建高性能、响应式的Web应用成为可能。本指南将深入探讨HTML5在移动开发领域的核心...

    贪吃蛇游戏 - 原生JavaScript实现

    在这个项目中,我们将探讨如何使用原生JavaScript来实现一个网页版的贪吃蛇游戏。 首先,让我们了解JavaScript的基础知识。JavaScript是一种广泛用于Web开发的脚本语言,它在浏览器端运行,负责处理用户交互、动态...

    JSCodeFromChris(移动Web网页开发)

    JSCodeFromChris提供的学习资源,聚焦于JavaScript(简称js)在移动Web开发中的应用,旨在帮助初学者及爱好者提升这方面的技能。这份资料包含了丰富的教程和实践案例,旨在让你全面了解和掌握移动Web开发的关键技术...

Global site tag (gtag.js) - Google Analytics