At the moment, I've two versions of the site, for mobile and normal:
m.domain.com
domain.com
All mobile devices are detected via apache (tablets+phone) and redirected to m.domain.com
I'm wondering if it is possible, on some tablets with high resolution screen to have:
m.domain.com once rotated vertical
domain.com once rotated to horizontal
I found the best way to do responsive and adaptive design is to have the same site for both mobile (phones and tablets) and desktop but use server side detection to serve up the html to that device, it saves bandwidth for the end user and it's easy to use.
Server Side Detection: https://github.com/serbanghita/Mobile-Detect
There's a plugin for many popular CMSs and you can just use it directly.
Example:
if( $detect->isMobile() && !$detect->isTablet() ){
**** small slider with 3 images ****
} elseif ( $detect->isTablet() ) {
**** medium slider with 5 images ****
} else {
**** the large slider with lots of images that are large ****
}
I use this any place, you don't need to build your whole page with it. You can in your content area only show the slider for desktop with 10 images, the slider for tablets with 5 images, and no slider or a slider for phones with 3 images. There's many possibilities.
CODE EXAMPLES https://github.com/serbanghita/Mobile-Detect/wiki/Code-examples
With responsive websites you shouldn't need to have 2 domains. (I assume there is a reason for your doing this).
Responsive design uses media queries to determine how elements should display depending on factors like screen resolution.
When a user switches their screen from landscape the browser will change the design based on your media queries.
I hope this helps.
Related
I have a report embedded on a website. Is there a way in the html to configure the report to change dimensions if a user is viewing the page on a mobile device?
Are you using power bi mobile for that ?
If yes you have to rotate mobile in to landscape view to get full dashboard experience, Otherwise you get limited data.
I am developing a web site which uses the aviary SDK web. What I has found is the crop feature cannot use to rectangular crop of image.
For mobile applications I cannot use meme feature. Keyboard is not displaying and other features also not properly use.
you can see the tool added at http://dev.canvastory.com/get-started/idea-1.html.
select dimension from dropdown and click next. Then next tab appears and you can upload photo using facebook, instagram , computer or dropbox.
Please check and give me a solution.
As noted in the Creative SDK Image Editor guide, the Image Editor isn't currently optimized for mobile devices:
For handheld use we generally recommend our native SDKs (iOS, and Android), which have a UI optimized for smaller screens and performance tuned to the native device.
In some cases, when using the Web SDK on a mobile device, certain tools may not work as expected and the layout may not fit the screen.
I am relatively new to SO, and this is my first question so I hope I get the format & question information correct. I am looking for a plugin or tool that can assist me with a specific display issue.
I have a mobile application that is deployed to both Android and iOS devices. I also have a mobile web application that renders very much like the actual mobile application in the mobile device web browser when the user browses certain parts of the server back end cloud service website on their mobile device. So far so good.
However, when the user browses these parts of the cloud service website on a desktop/laptop, they get the web application view - some of it stretched and not ideally optimised as this is really for viewing on mobile devices. The client would like that a user, on desktop/laptop browser can see a mobile 'simulated' view of the web application.
It has to happen when the user navigates to the page, not through installing chrome plugins etc
I see the ideal solution being something like an image of a generic mobile for when browsing on desktop, centred on the desktop screen, inside of which the web app view is rendered. Is there is plugin/tool that someone out there for this, I have done quite a bit of research and can only find information on emulators for testing etc. In a way all I am looking for is an image that dynamically resizes inside of which a view can be rendered, that looks well across many desktop screen sizes/resolutions etc. Rather than go about this myself (it would be a bit of a CSS learning curve for me) it would be great if something like this already existed.
An implementation like the above would free up real estate on the screen for other items like links and form buttons the client wants
Any direction on this would be greatly appreciated.
I embedded a Google Maps Street View in my page using "gmap3" jQuery Plugin:
Under certain browser width and on mobiles, Street View shows a black border in the bottom and the image is deformed.
You can try it here by resizing the browser window down to about 400px:
http://www.genovaperte.it/item/hostaia-del-missionario/
PS: in order to see the webpage you'll need username = webcompany and password = webcompany as the site is not online yet.
Already tested in many browsers and mobile phones with the same issue.
This happens both with the desktop Flash version and the HTML5 mobile version of the Google Street View.
Seems Google corrected the issue.
I want to have jQuery Mobile only if user is on a mobile or a tablet.
I was thinking to use Simple-RESS. This script allow me to access device screen.
The problem is that tablet screen resolutions are approaching desktop resolutions.
How can I correctly target mobile and tablet ? only with user agent ?
I think user agent is the best bet. You can however use viewport metadata tags and media queries in your header to adapt your site to different screen sizes using different stylesheets.