Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

windowWidth and windowHeight do not work on iOS safari #884

Closed
bmoren opened this issue Sep 1, 2015 · 11 comments
Closed

windowWidth and windowHeight do not work on iOS safari #884

bmoren opened this issue Sep 1, 2015 · 11 comments
Labels

Comments

@bmoren
Copy link
Contributor

@bmoren bmoren commented Sep 1, 2015

displayWidth/Height do work fine

@lmccart

This comment has been minimized.

Copy link
Member

@lmccart lmccart commented Sep 3, 2015

interesting... will check it out.
just wondering, @OhJia did you run into this at all with your mobile work?

@lmccart

This comment has been minimized.

Copy link
Member

@lmccart lmccart commented Sep 4, 2015

hm I'm not able to reproduce. running this code, I get the following:

function setup() {
  console.log("setup", windowWidth, windowHeight);
}
// prints: "setup",980,1409

can you tell me which version iOS and iPhone you are testing with?

is the problem that it's not returning anything or it's returning incorrect values?

@bmoren

This comment has been minimized.

Copy link
Contributor Author

@bmoren bmoren commented Sep 9, 2015

iPhone5, iOS 8.3
I'm getting nothing to return with your example above

here is the sketch that I discovered the issue with:


function setup() {
    //createCanvas(displayWidth, displayHeight); //works!
    createCanvas(windowWidth, windowHeight); //does not work
    noStroke();
}

function draw() {
    background(0);
    fill(255, 0, 0);

 for(i = 0; i<touches.length; i++){
    ellipse(touches[i].x, touches[i].y, 100, 100);
 }
 fill(50);
 textSize(180);
 textAlign(CENTER);
 text(touches.length, width/2, height/2);
}

@limzykenneth

This comment has been minimized.

Copy link
Member

@limzykenneth limzykenneth commented Sep 13, 2015

@bmoren I've just tested the sketch on my iPhone 5, iOS 8.4.1 with Safari and oddly enough, windowWidth and windowHeight works as intended while displayWidth and displayHeight is giving me a tiny version of the sketch.

Here's screenshots for sketch using displayWidth and displayHeight

img_3564

img_3563

On the other hand, the console messages when doing console.log("window: ", windowWidth, windowHeight) etc. in the setup function gives me this:

screen shot 2015-09-13 at 10 41 49 pm

What I think is happening in my case is that iOS and Safari have different figures when referring to the window size and display size (different dpi or something). Might be a OS/browser specific problem I'm not sure.

@mattdesl

This comment has been minimized.

Copy link
Contributor

@mattdesl mattdesl commented Jun 16, 2016

(Gonna leave this here for anyone still struggling with this...)

I can't reproduce the bug on my iPhone5S (iOS 9.2.1) but it sounds like it may be related to this:
bigwheel-framework/bigwheel#25 (comment)

You can try adding the following to head of your index.html that you use with your p5js sketch:

<head>
  <meta name="viewport" content="shrink-to-fit=0">
  <!-- other meta / title / script tags below -->
  ...
</head>

(I recommend this over document.documentElement.clientWidth since it may report a different size than windowWidth, e.g. inside of a Twitter browser)

@tstefanich

This comment has been minimized.

Copy link
Member

@tstefanich tstefanich commented Jan 27, 2017

Yeah you can get this to look correct with the right tag I used
<meta name="viewport" content="width=device-width, initial-scale=1">

This is working "correctly".... its more of a question if something gets added to p5 to make this easier/more seamless for individuals.

  1. either add this meta tag automatically to the index file
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
  1. Do some simple math to display sizes based on pixelRaio
if(window.devicePixelRatio !== undefined) {
    dpr = window.devicePixelRatio;
} else {
    dpr = 1;
}
var screen_width = window.screen.width * dpr;
var screen_height = window.screen.height * dpr;

But these will look different
screenshot 2017-01-27 12 39 01
screenshot 2017-01-27 12 47 50

..........

Maybe something like this gets added to p5... (this is mostly pseudo code) but I think this is ideological/conceptual/framework question...

if(window.devicePixelRatio > 1) {
  if(mobile){
     if(metatag.viewport){
          var metaTag=document.createElement('meta');
          metaTag.name = "viewport"
          metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          document.getElementsByTagName('head')[0].appendChild(metaTag);
     }
   }
}
@lmccart lmccart added area:mobile and removed area:mobile labels Mar 15, 2017
@lmccart

This comment has been minimized.

Copy link
Member

@lmccart lmccart commented Sep 29, 2017

I like the idea but I worry a little about doing too much magic behind the scenes. Generally we're trying to leave as much default browser behavior in place as possible. Maybe what is needed is a tutorial on p5 for mobile and this would be one element of that?

@limzykenneth

This comment has been minimized.

Copy link
Member

@limzykenneth limzykenneth commented Sep 29, 2017

I think we can add the meta tag into the example index.html and also into the web editor. I usually use them as part of a boilerplate and never really thought about them because they are the inelegant part of the browser I don't want to personally deal with...

@bmoren

This comment has been minimized.

Copy link
Contributor Author

@bmoren bmoren commented Sep 29, 2017

@limzykenneth I think including the meta is a great idea and would solve this issue entirely. I always forget to include it / present it to my students and after class is over inevitably have a 🤦‍♂ moment before sending out an after the fact reminder 😃

@lmccart

This comment has been minimized.

Copy link
Member

@lmccart lmccart commented Sep 29, 2017

ok I'm into that! I guess I was thinking you wouldn't want this in by default, but I guess there's no harm right? and putting it into the template example is leaving the library open still. 👍

@bmoren

This comment has been minimized.

Copy link
Contributor Author

@bmoren bmoren commented Sep 29, 2017

Yeah it seems like the best solution and I'd say the majority of the time it's the 'expected behavior' to have the element scale by default rather than show up as a small thing that the browser is trying to figure out. It kind of reminds me of the border box css property, where the behavior which most seems like it would be the default must be turned on manually.

I agree that this should not be baked into p5 itself but rather thought about like the removal of the default body margins and padding in the example.

@lmccart lmccart closed this in 6867dfc Sep 29, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.