what is the general resolution for mobile device

liquid

sorry for asking this,since i'm really interesting doing some stuff with p5.js on mobile device. not too sure is there any practical way to set common screen resolution to match most of the mobile device,so i'm guessing this has to been done with css?? also i found that if running sketch on mobile screen,i.e the chrome on android 4.4.2,it will zoom in or zoom out by tapping the screen. so i'm wondering any settings can disable this gesture behavior.

again,sorry for post here,this is seems not directly related with p5.js cheers

Eeyorelife

If you open chrome -> view -> developer -> javascript console and top left in the new window click on the little mobile icon, you get the resolution for different mobile devices. An here you'll find some functions that might be useful, for eksample displayWidth orwindowWith or windowResized()

blindfish

is there any practical way to set common screen resolution to match most of the mobile device?

Not really: the range of possible resolutions is pretty big and you also need to consider the performance of the target device - i.e. if you settle on an 'average' size and then use CSS to scale this down, low power devices are having to calculate the larger size, impacting on already limited performance. Higher resolution devices will possibly get a sub-optimal, blurry view of the sketch...

The ideal would be to render the sketch at the target size; though this will no doubt come with its own problems - e.g. having to dynamically load in appropriate image assets.

A lot can be done with standard HTML elements using CSS and media queries so you might find some useful pointers by looking up Responsive design. How you handle the canvas element itself is the tricky bit ;)

erkosone

Hola, en realidad si que la hay, excesivamente simple y extrañamente poco comentada.

La resolución de tu aplicación puede ser cualquiera, solo tienes que crear un framebuffer y pintar en el, luego lo buelcas en el buffer de video principal y nada mas.

Un ejemplo de esto:

// Example of virtual resolution por Processing 3.0.1.
// Author: Luis lopez martinez - Erkosone. 2016.
int virtualWidth = 320;
int virtualHeight= 200;
PGraphics buffer;
//------------------------------------------------------------------
void settings(){
  size(displayWidth, displayHeight, P3D);
  fullScreen();
}
//------------------------------------------------------------------
void setup(){
  buffer = createGraphics(virtualWidth, virtualHeight, P3D);
}
//------------------------------------------------------------------
void draw(){
  // Start draw in buffer with (320x200) fixed resolution..
  buffer.beginDraw();
  Main();
  buffer.endDraw();
  // End of draw in buffer..

  // Now dump video Buffer on main video..
  beginShape();
  texture(buffer);
  vertex(0,0,                           0,0);
  vertex(displayWidth,0,                virtualWidth,0);
  vertex(displayWidth, displayHeight,   virtualWidth,virtualHeight);
  vertex(0, displayHeight,              0,virtualHeight);
  endShape();
}
//------------------------------------------------------------------
void Main(){
  // Write your program here..
  buffer.background(0);
  buffer.fill(255);
  buffer.textAlign(CENTER);
  buffer.text("VIRTUAL RESOLUTION BY ERKOSONE!", 160, 20);
}

Extremely useful for android !!