Vue-material site is not responsive on phone - responsive-design

I'm using Vue-material on my VueJS 2 site and it looks as expected on my laptop. It responds accordingly as I shrink the screen. However, when I emulate a smartphone or open the site on my smartphone it simply looks like a "shrunken" version of the computer layout.
I may be missing something basic here, but I'm not sure what it is.
Site in shrunken down browser window 👍:
Site on smartphone 👎:

Related

Angular Bootstrap Collapse Navbar Not Responsive on Mobile Viewports

I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!

Enabling WebGl without the Windows shell

I am trying to make my own Windows shell(don't ask) but the problem is: when I use Google Chrome while the native shell(Windows Explorer) is not running, Chrome doesn't display web pages properly unless I turn off the GPU accelerated composting. It seems to me that WebGL isn't drawing page content at all. What do I have to do to enable WebGL while Windows Explorer is not running? [I am using C#.net]
Note that if I go to a page like get.webgl.org/ nothing will display no matter what.
If you can answer this question, you are a genius.

How can I view my ASP.net website on mobile devices

I am developing ASP.Net application which I will later upload/host it. I have being thinking or wondering on how can I access my website on the phone or any mobile device as this is preferable this days.
This is my first time wanted to be able to access my application on mobile device, just like any website that you can check/view using your mobile device.
Can anyone guide me on how I can do this or any tutorial that will help me.
If you have IIS set up on your dev machine, you can publish your project to IIS. Then you should be able to get to your site by specifying in the URL your PC followed by the port. Your phone/tablet will have to be on the same network as your computer, so that it can find it locally.
MyComputer:9000/
Take a look at this Tutorial
ASP.NET Web Deployment using Visual Studio: Deploying to Test
On another Note
If you use Google Chrome you can emulate the site on a Mobile Device. Other Browsers may offer this too.
See this Tutorial Below
Device Mode & Mobile Emulation
Firefox has responsive design mode.
With Responsive Design Mode enabled, the content area for web pages is set to the screen size for the particular device.
Initially, it's set to 320 x 480 pixels
There are three ways to toggle Responsive Design Mode:
From the Firefox menu: select "Responsive Design Mode" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on OS X).
From the Developer Tools toolbox: press the "Responsive Design Mode" button in the Toolbox's toolbar
From the keyboard: press Ctrl + Shift + M, (or Cmd + Opt + M on OS X).
For more details Responsive Design in Firfox
Upload your ASP.NET website on godaddy or any .NET host provider. Once you host it, you get the URL for it. Visit the URL on your mobile browser. Simple, isn't it?
If you want mobile version of the website, I would suggest you to use responsive templates for your site to minimize effort in importing website on mobile.

screenshot a page with swf in asp.net/c#

I want to take a screenshot of a page, which contains a swf file. (I'll not be able to modify the swf)
I tried to make screenshots using grabz.it, html2canvas.. but it works fine if it's a page without flash.
So how do i overcome this?
How do I make it work in asp.net / c#
Thanks.
A screenshot is a client operating system functionality, not a functionality of a web site (or web application, for that matter). There are multiple OSs out there (Win, Mac, Linux, iOS etc), and all handle screenshots differently.
Both tools you tried read and render HTML by themselves, and do not take actual screenshots. That's why they don't render Flash.
The only real chance you have is to find something like a Java applet, which takes a real "hard" screenshot of the user's screen, and is OS independent.
There is no way to take a screenshot with C# from ASP.NET codebehind.

Redirecting to device settings

Say I have a mobile optimized website which runs with a lot of javascript on it to create awesome effects, and a user enters the website via a mobile browser which doesn't have javascript activated.
Is it then possible to (through a button click) redirect that user to his/hers browser settings?
You need to have JavaScript activated in order to browse this site properly.
Click here to change your settings
In principle, you can create an intent: URL that references an ACTION_SETTINGS Intent, though I have not tried this. Off the top of my head, the simplest way to construct that URL is to generate a scrap Android project and call:
Log.d("Something", new Intent(android.provider.Settings.ACTION_SETTINGS).toUri(Intent.URI_INTENT_SCHEME));
then check LogCat for the URL that you would put in the Web site. Of course, this URL will only work on Android devices.
I only know Windows Mobile (and there, only up to v6.1), but I would guess your clients would have to have some app of yours prior installed to access features of the device itself.
If websites could access a device's features, it would be viewed as a virus.

Resources