Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
Some questions have come up, so I post them all at once. I want to set up a portrait website for an iPhone 11. The screen has a resolution of 828 x 1792px and the viewport is 414 x 896px so the CSS Pixel Ratio is 2. 1. Which screen seize do I set up in WSP the resolution or the viewport? 2.If I import an image is lets say 1200 x 1900 px, what happens in WSP? Is it different than in RocketCake? 3. What happens if I set the page seizes in WSP to auto? 4. When importing images, where do WSP and Rocket store the files? Ok, quite a few questions, but I'd rather know before I have to start all over again. |
||||
|
WSP is not responsive, it creates websites with a fixed size. Nothing is scaled. The viewport width of an iPhone is 414 in css units, so you should be fine when you put everything on your site with a width of maximum 414 units. If you put in an image for example, make sure it's not wider than 414 units if you want everything to be easily watchable, otherwise you have to scroll on your phone. I don't think the width and height you set for your site in the properties is relevant and mostly ignored on most browsers today - but I can be wrong. Imported images are stored usually in the rc_images or wsp_images folder. |
||||
|
Thanks a lot Nico. Guess with 'not wider than 414 units' it means pixel ? |
||||
|
Yes, it's not actual pixels on the device, but that's how HTML works. The iPhone 11 has a pixel ratio of 2.0, so it's actually 828 pixels, but for HTML, it just looks like 414. |
||||
|
Thanks again. Last question, I haven't understood about responsiveness. Is RocketCake responsiveness inherent or will it only be triggert by setting break points etc. I mean, if I import an image wider than 414 units, do I have to scroll on iPhone to see it all or makes RC it fit without me telling the width? And if so I then only have to care about the ratio? |
||||
|
Yes, usually only about the ratio. In RocketCake, almost all elements are by default sized to a percentage depending on the screen width. |
||||
|
|
){kind=link}