claireliu14/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="fname" name="fname">

    <script>
        function isMobile() {
            const userAgent = window.navigator.userAgent,
                platform = window.navigator.platform,
                macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
                windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
                iosPlatforms = ['iPhone', 'iPad', 'iPod'];
            var isMobile = true;

            if (macosPlatforms.indexOf(platform) !== -1) {
                isMobile = false;
            } else if (iosPlatforms.indexOf(platform) !== -1) {
                isMobile = true;
            } else if (windowsPlatforms.indexOf(platform) !== -1) {
                isMobile = false;
            } else if (/Android/.test(userAgent)) {
                isMobile = true;
            } else if (!os && /Linux/.test(platform)) {
                isMobile = false;
            }
            return false;
        }

        function isLandscape() {
            // !window.matchMedia('(min-aspect-ratio: 1/1)').matches
            // !window.matchMedia('(orientation: landscape)').matches
            // Android / iOS 在第一次呼叫回傳如下：portrait = true, landscape = false
            return orientation !== 0;
        }

        function doSomethingWhenResize() {
            const isMobileLandscape = this.isMobile() && this.isLandscape();
            if (isMobileLandscape) {
                // alert("size : " + window.innerHeight + " x " + window.innerWidth + "\n"
                //     + "isLandscape: " + this.isLandscape() + ", isMobile: " + this.isMobile()
                // );
                alertWarning();
            }
        }

        function alertWarning() {
            alert("Please keep device portrait to have best experience.");
        }

        // initial detect
        doSomethingWhenResize();

        // orientation listener
        window.onorientationchange = () => {
            console.log("onorientationchange");
            doSomethingWhenResize();
        };
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<input type="text" id="fname" name="fname">

	<script>
	function isMobile() {
	const userAgent = window.navigator.userAgent,
	platform = window.navigator.platform,
	macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
	windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
	iosPlatforms = ['iPhone', 'iPad', 'iPod'];
	var isMobile = true;

	if (macosPlatforms.indexOf(platform) !== -1) {
	isMobile = false;
	} else if (iosPlatforms.indexOf(platform) !== -1) {
	isMobile = true;
	} else if (windowsPlatforms.indexOf(platform) !== -1) {
	isMobile = false;
	} else if (/Android/.test(userAgent)) {
	isMobile = true;
	} else if (!os && /Linux/.test(platform)) {
	isMobile = false;
	}
	return false;
	}

	function isLandscape() {
	// !window.matchMedia('(min-aspect-ratio: 1/1)').matches
	// !window.matchMedia('(orientation: landscape)').matches
	// Android / iOS 在第一次呼叫回傳如下：portrait = true, landscape = false
	return orientation !== 0;
	}

	function doSomethingWhenResize() {
	const isMobileLandscape = this.isMobile() && this.isLandscape();
	if (isMobileLandscape) {
	// alert("size : " + window.innerHeight + " x " + window.innerWidth + "\n"
	// + "isLandscape: " + this.isLandscape() + ", isMobile: " + this.isMobile()
	// );
	alertWarning();
	}
	}

	function alertWarning() {
	alert("Please keep device portrait to have best experience.");
	}

	// initial detect
	doSomethingWhenResize();

	// orientation listener
	window.onorientationchange = () => {
	console.log("onorientationchange");
	doSomethingWhenResize();
	};
	</script>
	</body>

	</html>