I've a problem in my application. Native browser zoom in mobile devices don't fit my needs...
I've 3 main parts in my mobile web page.
Header
Main content area (there will be scroll inside this if content will increase)
Footer
If i use native zoom of mobile browsers then my whole page gets zoomed..
but i don't wants zoom effect in header and footer..
What i wants is to implement native browser zoom effect only in content area..
So please give me some guideline how it is possible to achieve this without any errors or cross browser issues?
Related
I have a responsive website WebsiteA, and I'm opening another responsive WebsiteB using an iframe.
I needed to make the iframe responsive as well (to take the full width and height of it's container div), so I did that with absolute positioning.
This is working fine in the browser, I can resize the screen and the iframe is behaving in a responsive manner, and I'm still able to interact with WebsiteB inside the iframe normally, like clicking the links, buttons ...etc
But once I use a device emulator (in chrome dev tools), or use an actual touch device (mobile, tablet), when I try to touch any of the controls (links, buttons ...etc) in the iframe (WebsiteB), then it seems that the touch events are being received at the wrong location, Therefore event handlers are not working.
Has anybody encountered this issue?
I am new to html. I'm currently using django to create a website and wondering is there some way that I can preview my website at phone? For instance, if I set my width to be 1000px, how this will behave in a mobile device?
if you are using google chrome, you can inspect the page (CTRL + SHIFT + I ) and then select the device icon in the upper left corner. This option will show you how your website will respond on mobile.
You should build a responsive web application. Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
You can use the Google Chrome dev-tools, but I find them woefully inadequate and often inaccurate. They don't render the site I am currently working on very well.
I would recommend using a tool like Ngrok. It can be used to let you host the development environment on your local machine while easily viewing the site on your mobile device.
First of all, I reccomend using frameworks like Bootstrap which make all your components on your page 100% responsive (components adjust to the display size automatically) if you want them to be.
When your testing your website on your browser, right click anywhere and select "inspect". You will be promted a viewing window where you can select the mobile device of your choice to emulatee your website on it.
See image
For example if I am developing an web application for iPhone, Blackberry mobiles. I will try to design content as per the device screen. If I open the same website in Tablets, screen size will be different and content will be expanded to screen width because it is liquid layout. This is what I am wondering. If I design a button using jQuery mobile, it will occupy the total width of the screen(Although we can change, this is not my case). But in tablet PC it will be expanded to total width of the screen, it does not look good. Is not it? So, here my question is What are things does jQuery mobile developer should take care of. And Is it necessary to develop website for different screen resolutions...?
If you are using Jquery mobile latest version.It supports the responsive web designs.
There are certain specifications for header,content,footer of the web pages in jquery mobile.
Go along with that.Also the grid layout displays the web page neatly in cross devices.
Developers need to customize the desired design accordingly with jquery mobile css.
We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.
I am tasked to implement a web page element that is a group of tiles that should scroll smoothly on touch devices, and support traditional scrolling via buttons in a web page:
On tablet, when a user scrolls the portfolio tiles, they should be scrolling instead of an entire page.
How can this be achieved with respect to layout/markup? Maybe you can advise an example tutorial on how similar has been implemented.
You would set a fixed height to the tiles container, and style it with: overflow: scroll and a bit of JS as described in the links below.
For more info on mobile specific touch scrolling, check-out:
http://cubiq.org/iscroll-4
http://blog.joelambert.co.uk/2011/10/14/a-fix-for-ios5-overflow-scrolling-scrollfix-js/
http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/