Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Viewport Size or Device Resolution?

cyberam
Registered User
Quote
2024-08-27 10:17:39

Sorry, I'm not a programmer and this might be too simple, but not for me. I'm setting up a non responsive portrait landing page for an iPhone but don't know about resolutions.

My iPhone 11 has a device resolution of 828 x 1792 px but a viewport of just 414 x 896 px.

1) So when I want to show a picture filling all the iPhone screen, then how to seize it and set in RC?

2) Or can I use the devise resolution or even bigger so viewers can zoom in?


erik
Registered User
Quote
2024-08-27 11:00:40

You can look that up in RocketCake itself, easily: Select View -> Show as on Device -> iPhone 11.

Then you see how your website will look like on the iPhone 11, and on the bottom of the editor, RocketCake shows the used resoultion, which is 414.

So I think the answer to your question is 414. But usually, you would set the size of an image to a percentage, so that it is responsive, and the actual resolution of your device won't matter.


cyberam
Registered User
Quote
2024-08-29 14:40:50

Sorry Erik that I haven't figured it out myself. So is it right to import the pic in full resolution (1600x2900) then set the resolution for the viewport to 414 or just 100%?


niko
Moderator
Quote
2024-08-30 06:41:42

Yes, import it as full resolution (or a bit reduced one in case you want the transfered file size to be a bit smaller).

What size you make it look on your website won't change the file. It only influences how it is being shown on the end user's device.

If you want your website to be respsonsive, set it to 100%. If your website should have the image be at a certain pixel size, no matter the screen size (that causes it to appear larger on small screens and smaller on large screens) set it to 414.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Inter?ational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact