CSS判断横屏竖屏 写在同一个CSS中
成都创新互联是一家从事企业网站建设、成都网站设计、成都做网站、行业门户网站建设、网页设计制作的专业网站建设公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点上千多家。
@media screen and (orientation: portrait) { /*竖屏 css*/ }
@media screen and (orientation: landscape) { /*横屏 css*/}
你给的网页用的是 input accept="image/*" type="file"，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。
AngularJS
没有相机插件，cordova。phonegap才有相机插件。
首先用命令：
phonegap
plugin
add
org.apache.cordova.camera
安装相机插件
然后再用
navigator.camera.getPicture(onSuccess,
onFail,
{
quality:
50,
destinationType:
Camera.DestinationType.FILE_URI
});
进行访问。
记得一定要在onDeviceReady()
之后调用
h5不能直接调用摄像头，只能用input type="file" /上传图片来间接调用摄像头
1、实现头的方法代码。
2、编写CSS样式的方法代码。
3、html上传代码。
4、JS处理方法代码。
5、测试结果如下。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title手动旋转相机/title
script type="text/javascript" src="../libs/three.js"/script
script type="text/javascript" src="../libs/jquery-1.9.0.js"/script
/head
body
div id="container"/div
script type="text/javascript"
$(function(){
var container;
var camera,scene,renderer,light;
var mesh;
//这个mouseX和mouseY 记录的是鼠标相对于屏幕中心的位置，所以mouseX的范围是[-屏幕宽的一半，屏幕宽的一半]，mouseY的范围是[-屏幕高的一半，屏幕高的一半]
var mouseX = 0,mouseY = 0;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
init();
animate();
function init(){
scene = new THREE.Scene();
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);
camera.position.z = 180;
camera.lookAt(scene.position);
light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(0,0,10);
scene.add(light);
var cubeGeometry = new THREE.CubeGeometry(30,30,30);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000 });
mesh = new THREE.Mesh(cubeGeometry,cubeMaterial);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove',onDocumentMouseMove,false);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize(){
windowHalfX = window.innerWidth/2;
windowHalfY = window.innerHeight/2;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
function onDocumentMouseMove(){
//因为世界坐标系的原点在屏幕的中心，所以，将屏幕实际坐标减去屏幕宽高的一半，就将屏幕坐标的坐标原点移到世界坐标系的原点。
mouseX = (event.clientX-windowHalfX);
mouseY = (event.clientY-windowHalfY);
}
function animate(){
requestAnimationFrame(animate);
render();
}
function render(){
//根据mouseX和mouseY改变相机的坐标
camera.position.x += (mouseX - camera.position.x);
camera.position.y += (mouseY - camera.position.y);
camera.lookAt(scene.position);
renderer.render( scene, camera );
}
});
/script
/body
/html
