http://codepen.io/Amaltheya/pen/GrreVY
这是我到目前为止所拥有的。我在Chrome中使用移动调试模式来解决问题。我还将它发送到服务器,以确保它不仅仅是关闭chrome。如果您认为这很容易,我会感激任何建议或分叉。
只是要清楚地重申这个问题:为什么在Chrome浏览器中从移动检查模式查看时下拉菜单链接不起作用?
似乎导致问题的javascript:
//javascript for pixel art
let width, height;
let pixels = [];
let coloredPixels = [];
let colors = ['#540045', '#C60052', '#FF714B', '#EAFF87', '#ACFFE9'];
let currentPixel = 0;
const mousePosition = { x: window.innerWidth/2, y: window.innerHeight/2 };
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const drawGrid = () => {
ctx.clearRect(0, 0, width, height);
for (var i = 0, l = pixels.length; i < l; i++) {
pixels[i][4] = 0;
}
for (var i = 0, l = coloredPixels.length; i < l; i++) {
var pix = Math.floor(coloredPixels[i].y/10)*(Math.floor(width/10)+1) + Math.floor(coloredPixels[i].x/10);
if (pixels[pix]) {
pixels[pix][4] = coloredPixels[i].color;
pixels[pix][5] = coloredPixels[i].alpha;
}
if (coloredPixels[i].alpha > 0) coloredPixels[i].alpha -= 0.008;
if (coloredPixels[i].alpha < 0) coloredPixels[i].alpha = 0;
coloredPixels[i].x += coloredPixels[i].vx;
coloredPixels[i].y += coloredPixels[i].vy;
}
for (var i = 0, l = pixels.length; i < l; i++) {
ctx.globalAlpha = 1;
ctx.fillStyle = '#222';
ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]);
ctx.globalAlpha = pixels[i][5];
ctx.fillStyle = pixels[i][4];
ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]);
}
}
const resize = () => {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
pixels = [];
for (var y = 0; y < height/10; y++) {
for (var x = 0; x < width/10; x++) {
pixels.push([x*10, y*10, 8, 8, '#222', 1]);
}
}
}
const draw = () => {
launchPixel();
launchPixel();
drawGrid();
requestAnimationFrame(draw);
}
const initColoredPixels = () => {
for (var i = 0; i < 300; i++) {
coloredPixels.push({
x: width/2,
y: height/2,
alpha: 0,
color: colors[i%5],
vx: -1 + Math.random()*2,
vy: -1 + Math.random()*2
})
}
}
const launchPixel = () => {
coloredPixels[currentPixel].x = mousePosition.x;
coloredPixels[currentPixel].y = mousePosition.y;
coloredPixels[currentPixel].alpha = 1;
currentPixel++;
if (currentPixel > 299) currentPixel = 0;
}
resize();
initColoredPixels();
draw();
window.addEventListener('resize', resize);
window.addEventListener('mousemove', function(e) {
mousePosition.x = e.pageX;
mousePosition.y = e.pageY;
})
const touchMove = (e) => {
e.preventDefault();
mousePosition.x = e.touches[0].pageX;
mousePosition.y = e.touches[0].pageY;
}
document.addEventListener('touchstart', touchMove);
document.addEventListener('touchmove', touchMove);
// javascript for hamburger
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.bind("mouseup", handleHam);
hamburger.bind("touchend", handleHam);
});
function handleHam() {
$(this).toggleClass('active');
if($('.nav-menu').is(':hidden')){ // check to see if menu is hidden
$('.nav-menu').slideDown();} // if so slide down
else{$('.nav-menu').slideUp();} // else slide up
return false;
}