XCode's OpenGL template seems to be cheating to solve this "stretched" viewport problem I've been trying to understand for the last 3 hours.

In the iphone "OpenGL ES Application" template, the colorful square that bounces up and down on the screen is not really a square at all!

ES1Renderer.m (the ES2 file as well)

static const GLfloat squareVertices[] = {
    -0.5f,  -0.33f,
     0.5f,  -0.33f,
    -0.5f,   0.33f,
     0.5f,   0.33f,
};

But it comes out looking square on the device/simulator due to the stretching/squashing effect of a non-square viewport. I tried to fix it by fiddling with glFrustumf() but that doesn't seem to change the aspect ratio.

I was able to get things looking good (not-stretched) when I fed glViewport() with a 1:1 widht:height.. But this doesn't seem like the answer because it offsets the viewport placement.

What's the right way to correct for this stretching and why doesn't XCode do it that way?