You need to account for the size and shape of the viewport. Transformations are done in "normalized coordinates". This means that the bottom left corner of the viewport is (0,0) and the top right corner of the viewport is (1,1). Your projection matrix needs to account for the shape of the viewport to compensate and make your quad square.
The ratio of the height and width of a viewport is known as the "aspect ratio".
See this page, the important section for your problem is The field of view and Image Aspect Ratio. There's too much content to post a usable excerpt here. You should have no trouble finding resources on projection matrix aspect ratios, and how to compute a correct projection matrix.