I am looking to develop a webpage specifically for viewing on an iPhone/mobile browsers. The layout would be something like this:
I would like the two tabs at the top to be fixed, i.e. they would always appear at the top of the viewport/screen, and the content in each tab to scroll (the height of the content in each tab would exceed the remaining available height, and so I would want this to scroll).
Ideally there would also be a transition on switching tabs (perhaps a simple fade would work best with the graphics capability of the iPhone), though this is not essential.
I would be grateful for any advice in getting this set up,
Thanks,
Nick
Look into JQTouch it's a library that does nice animations similar to iPhone native OS.
Related
since I am learning Flutter now for about a year, I am using several responsive layout functions to be sure that my app looks fine on each device. Normally, I am using MediaQuery with a factor for Containers and Cards and if I have Text inside, I use FittedBox with BoxFit.contain. So far, it works well, but from time to time I get an overflow, e.g. when my colleague opens the app on his IPhone 12 Emulator. Yesterday, he had an overflow inside the bottom nav bar. It was because of the icons and I do not know why this appears. I gave the bottom bar a defined height with MediaQuery and wrapped the icons inside fitted boxes. After that, I defined the icon size with Media Query as well, still no real improvment. The title, or the label is not displayed.
Well my question would be a general one: Since I have no real experience with other languages, I am not able to compare the effort which is neccessary to have a responsive layout to other languages, but maybe an experienced developer can give me some tips how to improve the workflow of having a responsive layout. We want to launch in the app stores in August and the fear of having overflows on several devices drives me crazy. In this case, it is more a responsiveness to many mobile devices rather than having a good layout on mobile, desktop, tablet. So please, tell me about your approaches. It would really help me!
Regards!
See for responsive design, try to use the Padding and the Expanded Widgets the Most.
They are most useful when designing responsive screens.
Also, you can see other layout widgets here.
Dont use specific pixels (numbers) to limit the size of anything, try making it dynamic based on screen size.
Between phone and desktop, make 2 layouts and switch them as needed.
Between different sized phones, padding should do the work.
I've worked on my application for a couple of months, I hired a designer to do the UI and every screen in the app is based on 3 main elements - top bar, bottom bar and content.
I tried to use auto-layout and setting the top and the bottom bar was a piece of cake, but the image I use for a background in the content view shouldn't be resized (it's based on circles and they turn into ellipses).
Is there a way for me to submit the app only for the iPhone 5/5s/5c?
You can't specify device types within the iPhone category. Your best bet is either to design a layout that can work for both screen sizes, re-design the layout so it automatically displays a "4S version" and a "5 version" depending on the user's device, set it to a ScrollView so the user just scrolls up and down to see the full page, or design it so the individual elements can be cropped (or squeezed together) on the smaller screen without actually resizing the individual pieces.
I've built a photography site that displays photos side by side, user scrolls though photos using a horizontal scrollbar. (link removed no longer works)
I have used the jscrollpane plugin to customize the look of the scrollbar, but I have disabled it for the time being as I look for a fix. The container is called .scroll-pane.
Can anyone tell me how to get this to work on an iPhone?
Thank you and happy new year
Yeah, that won't work on iOS. You can use two fingers to scroll such an element, but most people are not aware of that.
You should consider a responsive design that adjusts how your site functions in mobile browsers.
Feedly for iPhone comes with cool design especially its custom pagecontrol(scrollbar?) placed on the top.
I'm developing an app for iPhone, and to use spaces efficiently as much as it's possible I'm trying to find a way to implement custom pagecontrol like Feedly. I actually think it's possible the app is made with HTML5 and CSS? Although I am not sure. I found some custom opensourced pagecontrol frameworks, but they're to do with something else such as dots' colors either sizes.
Here's example image link to Feedly for iOS http://i.stack.imgur.com/wf595.jpg
Although this is an iPad version, basically iPhone one is the same. You see the green bar just below the status bar, if you slide pages the colored bar scrolls. It's much more like scrollbar.
Thanks.
Okay, so I unarchived the app and it turned out it's mainly made with HTMLs and converted using PhoneGap. I'm not going to use HTML in my app, my journey still goes on...
Putting all contents into an UIWebView (implementing in HTML & CSS) is generally a bad idea performance wise.
What Feedly seems to do is use an UIScrollView.
The ScrollView sends several events including when it's moved and tapped.
They then update the green scroll bar on top whenever the ScrollView is moved.
Likely, they will also load the actual contents within the ScrollView as the user approaches their position to conserve memory.
You can implement something like this yourself in a few days of coding work.
(Disclaimer: This is just how I would implement what you showed. How it is actually done - only Feedly knows.)
I have a web app that wraps the main site content in an Iframe to enable some elements that are persistent across the site (only way to do what I'm after as far as I can tell).
It works fine on most browsers, but there is a scrolling problem on the Iphone: The content displays, but trying to scroll does a drag and drop operation instead.
Is there any way to tell the Iphone browser to use normal scrolling in that specific Iframe?
Example site: http://carlocapocasa.com
Thanks a ton and a half,
Carlo
Use two fingers to scroll up and down.
I also had problems getting an iframe to scroll on iOS devices. My iframe was inside a DIV, which had it's overflow set to hidden.
My solution was to set the overflow of the containing DIV to visible.