i have got an existing website developed using asp.net 3.5. business requirement is such that it needs be accessed through mobile devices mainly and mostly tablets.
is there any way i can achieve that without converting the entire website to mvc4 or re writing the front end code?
Try setting the viewport meta tag to at least scale the site on mobile devices, like so:
<meta name="viewport" content="width=device-width, initial-scale=1">
But really, its impossible to make a site fully responsive and mobile friendly without changing the front-end.
Bootstrap's grid system is a quick and fairly easy way to get started with a responsive design. It is a 12-column fluid grid layout that stacks or expands as the screen size or device width changes, and comes with 4 preset widths to help you distinguish among mobile devices, tablets and desktops. You will have to restructure the front end to fit into the grid template, but this shouldn't require a total re-write.
Check out the docs and examples here: http://getbootstrap.com/css/#grid
Related
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
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
So, i've been struggeling with getting my website to work on phones, i'm using a grid, but once i'm trying to view it on a phone it looks awful.
I just want to scale down the desktop-version to half the size on phones.
I've been trying the old zoom:0.5; and transform:scale(0.5); but neither has yeilded me any acceptable result, does anyone know how i can fix this?
I'm using <meta name="viewport" content="width=device-width, initial-scale=1" /> right now, but i've tried without it also.
Here's a link to the website: http://7b772c72.ngrok.io/wordpress/
My grid: https://github.com/joelfolkesson/jf/blob/master/style.css
Shrinking down the content will most likely result in an illegible website on smaller view ports.
You can try media queries for your CSS to give your website the appropriate scale for the sizes defined in said media queries.
If you have not invested too much time I would suggest using Twitter Bootstrap as it already has decent cross device CSS that allow for quick and easy mobile friendly deployments.
You can check out this site that was build with Twitter Bootstrap.
UPDATE:
You want to keep the layout the same as the desktop view for mobile. But as stated above the text will become illegible on mobile view ports and that is in deed the case.
What I would suggest is that you change the CSS media query that governs your menu and logo and increase its size to be readable on the mobile view, instead of using zoom: 0.5;.
Change your logo sizing for the mobile view to about 75% and either change your menu items to 100% width or try using a different defined style for it and either put them in a grid of 3 with 33.3% width and your menu should split into 2 sections above and below or change the grid to 6 with 16.6% width and fit them next to each other and decrease your padding to allow for bigger text.
Other than that I can't help much further as your stylesheet naming conventions are very confusing to me.
I'm currently working on a responsive style sheet which is live at the moment but looks horrendous on non desktop dvices as it is a work in progress.
Is it possible to use some JavaScript to force the desktop layout to load on every device regardless of viewport size?
add this to your head
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
Be sure to change the SITE_MIN_WIDTH with your min width of the site. this should force the device to load in to proper sizing.
It sounds like you want to disable some of your media queries with JavaScript.
As far as I know, no, you can’t do this.
You could do the following, although it’s very roundabout:
Add a class to the <html> tag, e.g.responsive
Prefix all the CSS blocks that aren’t currently working as you want with that class, so that they only apply when the class is present.
On page load, use JavaScript to remove that class from the <html> tag.
But then, presumably, you’d need a way to turn them back on when checking them on the devices you’re coding for. Otherwise why have them on your live site in the first place?
Media Queries simply call different CSS files based on the current resolution.
If it is mobile first responsive it starts with the lower sized screen and builds up. Editing your CSS and removing any CSS that affects screens smaller than desktop should do the trick. However, not sure in what system you are using that the site is already built and you need to disable. Their could be hundreds of ways to do this. I do not know what OP is but I would suggest editing your CSS files. You should be able to find what CSS is being loaded by using Firebug on Firefox.
I have a complex web application which is based on dijit.layout. You will find a good example of the structure here (check the examples).
As you can see there is no full page scrolling only scrolling inside the layout boxes. All layout areas have overflow:auto, which means they enable scrolling when the layout areas content is larger than the available area space.
The problem is, iOS devices like iPad/iPhone/iPod touch don't support scrolling inside HTML only for a full page.
Is there any generic way to make a digit.layout application compatible for iOS and other touch devices? For example extend the layout areas depending on the length of the content.
did you already find a solution to this problem? I played around with a combination of dojox.mobile.ScrollableView and dijit.layout but end up having two scrollbars.