I am having trouble with content managment. Kindly assist me [on hold] - javascript

I want to create my social networking website responsive. I know about media queries. My doubt is that I want to show some extra things on desktop while on mobile screen, I don't want that. I can use media query to hide that extra content from 360 or smaller pixels screen. My doubt is that I want that on low resolution devices, that content should not load as it may effect on performance. That content should be only loaded on higher resolution devices like desktop.

Related

How to display Jquerymobile app differently to mobile and tablet

Im building an app with Jquery mobile and Phonegap and my employer wishes that the app displays content differently on an tablet and on an Iphone, especially he wants the app to display an certain form on an Iphone with input field stacked on top of each other and spread out on an tablet since it has more space on the sides. On the tablet it should also be fixed horisontally. Does anyone know some resources to dig deeper into this?
have you heard of Responsive Design? This will make use of css media queries to display the contents based on the screen size of the device.
jQuery Mobile has some built in support for responsive design, but sky is your limit for your innovative designs.
Check this simple tutorial too.

Responsive Design on mobile phones with higher resolutions

To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.
My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.
Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.
Many responsive websites use media queries to display a CSS file based on the pixel width.
Wouldn't this be the same for both my monitor and phone?
MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.
EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.
I recently created a website using similar tech http://www.super-rod.tv/
It targets on both PC and mobile devices and will response to dynamic browser width resizing.
I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen.
If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width
To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).

New method for getting device type for mobile webpages

I've been researching for a good way to get the devicetype to trigger mobile websites and many people still use script that gets the screen width/height in pixels to determine if mobile devices are used or not.
But mobile phones/tablets have extremely high resolution screens so we need to get another way to trigger a switch between normal websites and mobile websites.
Screen sizes are around 1,280 x 768 - 1920x1080 for mobile phones and 1920x1080 to 2560x1600 for tablets.
What is the correct error-proof method to determine mobile or not?
I'd like not to use javascript over php, if there's an easier method then javascript please tell!
you can make the mobile website responsive trough Media Queries in your CSS
It will overwrite your normal CSS for the website. Media Queries will check for resolutions and what you put in the media query will be shown like that in a resolution like that
http://webdesignerwall.com/tutorials/css3-media-queries
With Javascript you can do check the browser with the code I found on this page:
http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/
with that code you can redirect to a website specially designed for mobile website

Behaviour of website developed using jQuery mobile in mobiles and Tablets

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.

Designing a website for iPad

I need a little advice about how to design a website for Apple iPad.
First of all the facts, and my plan:
Facts:
- iPad has 1024x768 screen
- The viewable are (FOLD) is 916 in portrait and 660 in land.
Im not sure about this information, 'coz so many pages with different information. (read 952 too somewhere, so if you have Ipad please confirm the correct number with standard SAFARI settings)
My plan:
My plan for the design is a very long one page site.
For example
- a five menu page (that mean i have 5 div one under the other)
- every menu is a film-qube
- visitors always see one menu, so one film-qube
My questions:
Which is the correct size on iPad?
How to fit my DIV size (height) to always fit the screen?
If this is possible than:
- cause this any problem viewing on PC? (so i need to use this setting only if the browser agent is iPad?)
Thank you for any suggestion.
If you don't have access to an iPad for testing, then you might be best to look at an emulator. Something along the lines of: http://ipad-emulator.org/
Bear in mind though that Safari isn't the only browser available for iPad, and so any size estimations you make based on that may not apply for other browsers.
Otherwise, Google is your friend:
How to fit your website for the Apple iPad
If you're trying to make the website accessible on both desktop browsers and the iPad, I would suggest building your site using CSS media queries. It allows you to change the site based on the browser size.
http://www.w3.org/TR/css3-mediaqueries/
The syntax is quite simple, here is an example:
#media screen and (max-width:443px) and (min-width:250px){
.class{}
#id{}
}
The way this works is when the screen is between 250px and 443px it applys the styles within it. As long as you keep your media queries at the bottom of your CSS document you will overwrite the other properties. The advantage of this, is you can test it by resizing your browser window.

Resources