I am trying to create a marker as an overlay over the website. The marker I am using now is an HTML div are 3, 1 pixel sized blocks.

<div style="position: fixed; top:10vh; left:90vw; z-index: 99999;">
    <div style="width: 1px; height: 1px; background: rgb(0, 255, 0);"></div>
    <div style="width: 1px; height: 1px; background: rgb(255, 0, 255);"></div>
    <div style="width: 1px; height: 1px; background: rgb(255, 0, 0);"></div>
</div>

And I am trying to detect the same with help of

for (row in imageArr) {
        for (col in imageArr[row]) {
            if( JSON.stringify(imageArr[row][col]) == JSON.stringify(alignments[0]) ) {
                console.log( "1" );
                if( JSON.stringify(imageArr[parseInt(row)+1][col]) == JSON.stringify(alignments[1]) ) {
                    console.log( "2" );
                    if( JSON.stringify(imageArr[parseInt(row)+2][col]) == JSON.stringify(alignments[2]) ) {
                        console.log( "3" );
                        alignments_loc.push([row,col]);
                    } else if( JSON.stringify(imageArr[parseInt(row)+2][col]) == JSON.stringify(alignments[1]) ) { // If the second one repeats twice
                        console.log( "3" ); 
                        if( JSON.stringify(imageArr[parseInt(row)+3][col]) == JSON.stringify(alignments[2]) ) {
                            console.log( "4" );
                            alignments_loc.push([row,col]);
                        }
                    }
                }
            }
        }
    }

But it works only on certain screens, and when I test on mobile or other it fails, could you please tell how can I fix it? So that the marker can be read.