Zooming your webapplication on demand - javascript

Im working on a very large asp.Net mvc application, that uses the full width of the screen to show thing. Already on a full HD screen, things are limited, and barely squishable.
When I want to make it mobile friendly there will simply be a different organization of data on the screen, no worries.
But for tablet sized devices I would like to make the site "zoomable". You know when you go to some websites, the entire thing is super small, and then you can zoom with your fingers, in and out.
I want that, but on purpose.
How do I do that?

Your description is a little bit fuzzy, but it sounds to me like you're looking to set the viewport meta tag

Related

Website Loads CSS / Jquery styles slowly

I have a website i'm designing right now, and i'm new to using JQuery. I'm noticing on my slick-carousel slider that the slides and styles adjust them self's while the user is loading the page for the first time in the browser. I have a few media-queries in place for different resolutions, and it seems that it has to adjust.
Is this because of the way i wrote the code, or is this something that happens with Javascript? What's the best practice to avoid this?
Here is the site link - Advanced Litho Website Re-design
Look at this URL: https://gtmetrix.com/reports/www.advancedlitho.com/aCuNhAl7
Here you can see that your images are huge in size. GTMetrix is showing that scaling your images properly can give you a boost of 1.9MB
Do whatever is said on the test and you should be fine.

How to display web content correctly even if the browser is not maximized?

My problem is that my web site's content (design) "breaks" when it's not maximized ...
I want it to be like most of the others web sites (e.g. facebook) ...
So when the site is not maximized, that the design don't fall apart, but instead it stay "static" no matter how much I change the height/width of the browser manually.
Does anyone have an idea (I'm looking for some code :D) ?
Regards,
You might want to look into a css framework like bootstrap. If you follow their styles you get a lot of responsive resize features for free.
http://getbootstrap.com/

How to deal with different viewport sizes the best way?

I am Programming a webapp that uses a mobile-first design principle.
I have tested the design with my primary devices but then I discovered, that other devices with nearly the same display displays the page completely different.
The problem is because of the device-pixel-ratio, the app toggels to another media query and so the margins just look strange. On the Picture that does not look much, but on the device it really looks strange.
Is there a way I can modify the device-pixel-ratio within my javascript or css?

Stuttery performance issues with Jquery Mobile and Phonegap

So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.

How I can make mobile version of my website which will work in android , iphone,ipad?

I want to replicate a site for it's mobile version. The site have slider , simply header,footer and dropdown.
Are we able to make exact thing for mobile ( in my case I am talking about slider and drop-down made in jQuery).
What I want is make same feeling on mobile as we have for normal site. Like I see in Video example as people shown (demonstrate) for ipad,iphone that click on menu and page slide to right and something show as new page. I don't want this.
I want to choose the existing themes and color-scheme in mobile edition.
How I can do it.
for this we have something called as Responsive Web Design :)
you can have a look at here :
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
Another good place to start: http://html5boilerplate.com/
This topic is much more complicated than simply adding a few lines of code, but here's what I can offer:
If you want separate mobile and desktop (which I would suggest against) you're going to have to do some device sniffing. The easiest way would probably be to check screen size and redirect if it's under 320px or whatever size you decide on.
This will make your page load a little slower, because you're going to have to wait for the page to parse the screen size detecting script, check to see if their screen is too small, and then redirect. That's going to take a long time on a mobile device and you're not going to make any fans because of slow load time.
Responsive design is the best solution. I think you should take a step back and consider why you want your site to split into two different sites and if you are going to have the ability to constantly maintain both.
You need to use media-queries http://www.w3.org/TR/css3-mediaqueries/
with media queries u can set styles for misc devices and save mutual html...
Instead of responsive design, you can use a DDR to tailor your content to particular mobile devices: http://wurfl.sourceforge.net

Categories