For my Asp.Mvc 5 project, I have a horizontal menu, like; Home, Products, about, etc.
For that menu, I have used some CSS styling to make it collapse into a dropdown menu, if the page size is getting reduced, or the resolution is low:
#media screen and (max-width: 767px) {
.headerNavigation{
....
...
}
}
This works fine on my laptop and PC ; if the width of the browser gets below 767px, it will make it to a drobdown instead. This was so it would not start putting the last <li> below the first<li>.
The thing is, it doesnt work on tablets, as the resolution is usually high there. But the last <li> will still be moved below the first one, as the screen size is smaller.
So my question is: Is there a way to check, if your Mvc5 webpage is running on a tablet? Or is there a better way to handle something like this ?
Maybe you should consider responsiveness?
It is better than simple #media statements if you expect the page to be displayed on many devices like PC/tablet/smartphones.
Take a look here: https://www.google.com/search?q=css+responsive+tutorial
You should not try to "detect" a tablet. Your web should be fluid as a river that borns tiny in the mountain and gets huge when gets to the sea: you get water all along.
Smartphones are getting bigger and maybe in a near future a smartphone will enter in you "tablet" mediaquery.
Your website should look fine in all.
Anyway, if you want to detect your device, you can do that server side with PHP script like PHP Mobile Detect
I'm not a programmer, but my developers here in the office tells me that you can archive the same in .NET.
Tablets prefer to scale webpages, give it a try with portrait:
#media only screen and (orientation:portrait) {
.headerNavigation{
...
}
}
Assuming the menu should show as normal when on landscape.
Related
THIS IS NOT A HTML / JAVASCRIPT / CSS question!
Check out these images:
I need to get the HTML display area (aka viewport) offset to the 0/0 of the IE window.
I am targeting Microsoft Internet Explorer 11.
I am using C# with SHDocVw.InternetExplorer library to access/control the IE.
What I actually want to do is to trigger double-click events
similar to IHTMLElement.click(), just a doubleClick()
calling IHTMLElement.click() multiple times does not work
I tried to solve it WITHOUT actually clicking:
How to make SHDocVw.InternetExplorer fire events that get caught with JS addEventListener?
but that has not received any answers yet
So right now I'm controlling the mouse to trigger certain events, calling [DllImport("user32.dll")] public static extern bool GetCursorPos(out PointInter lpPoint); and the like to get and set the mouse cursor and to simulate double-clicks on certain elements.
For the mouse navigation I already take into consideration
the OS's desktop zoom/scale setting
the IE window Left and Top properties
the location of the IHTMLElement(3).getClientBoundingRect, i.e. the position of the element I wanna trigger
This all works perfectly fine when the IE configuration is the same. My assumptions:
same HTML viewport offset (same toolbars, menus etc)
HTML viewport scaling 100% (no page zooming)
But those two factors are dynamic, so I have to account for them in some way.
So what I need is:
The HTML viewport's vertical offset (in both screenshots it's 106 pixels)
The HTML viewport's horizontal offset (in first its 1, in second it's 291)
The HTML viewport's zoom factor (in both screenshots 100%)
I have tried accessing multiple elements in the ShDocVw.InternetExplorer object, but I either have the wrong interface casts or it does not expose this information willingly, because I could not find it yet.
From a delve into the google world I also came up empty, so no (obvious) answers there either.
So does any one of you know how to deal with this problem? Some obscure COM/OLE incantations and rituals that could guide the mouse cursor on its way?
EDIT:
Dirty solution: I could display some homemade HTML/JS page first, that detects my simulated mouse movement and dump that information into some (invisible) div, then read that data in C#.
Though this is a solution, it's quite ugly and not useful for taking into account layout/display changes that might occur during later runtime, if user changes zooms while the app is working.
I have a web page that uses bootstrap 3 css and when a user print the page, it always seem to take the small or x-small layout, making controls really bigs and on different lines. I am ok with the page layout being that way on xs layout because it does make sens on a small screen, but it doesn't on paper.
I am not really good in css in general, but I was wondering if there is any way to force the printing so that the printed version look like the "md" version or even bigger ?
EDIT : Just to make sure I explain correctly, here is the page on a big screen
And here the printed version :
Is there anyway way to make the printed version bigger in term of width ? If this is possible, the controls will indeed be smaller but better stacked, which is what I am aiming at.
If you want to do this with css only:
#media print
{
/*whatver css you need here*/
}
The #media rule allows you to specify a different style for different media.
But another approach it to add a print button to the site that uses javascript to open the print dialogue. Then based on that click event you can make changes to the page/ show a printer friendly version.
additional css approach:
add a css stylesheet specifically for printing
<link rel="stylesheet" media="print" href="print.css">
Copy your regular stylesheet into print.css and change all the fonts to print friendly ones. This is better than option 1 because it sounds like you want to override a lot of settings and !important is bad practice.
I have an app that displays video in a subview and where it would be nice to give the option to display that video on a second screen such as an Apple TV and be able to use that freed-up space to show additional controls.
I've found all sorts of help about how to do that, but I'm hitting a wall even before getting out of the starting gate.
In order to detect that the app has started up in a multiple display environment, all the sample code features a line like...
if (UIScreen.Screens.Length > 1) {
// ...
}
(I'm doing this in C#/Xamarin, though I doubt the problem is related to that; anyway, the snippets are in C#)
My problem is that the array of screens is always 1 no matter what I do. The iPad is running iOS 11.2.5, and if I turn on mirroring, the iPad is mirrored, but , again, the array of screens only has a single item.
There are also a couple of observers to detect screens being added/removed while the app is running. I haven't seen Xamarin specific code, but I presume it looks like:
NSNotificationCenter.DefaultCenter.AddObserver(this, UIScreen.DidConnectNotification, NSKeyValueObservingOptions.New, IntPtr.Zero);
NSNotificationCenter.DefaultCenter.AddObserver(this, UIScreen.DidDisconnectNotification, NSKeyValueObservingOptions.New, IntPtr.Zero);
Anyway, those never fire even if I add/remove the Apple TV or enter/exit Mirroring Mode on the iPad.
Oh; also if I do
avPlayer.AllowsExternalPlayback = true;
avPlayer.UsesExternalPlaybackWhileExternalScreenIsActive = true;
then that works as expected, too. The video now appears full-screen on the Apple TV and the UIView on the iPad containing the avPlayer greys out rather than showing the video.
However, that's not what I'm looking for. I would like to control the layout of both screens and that does neither. (While I do want the video to be full screen on the Apple TV, I don't want it to be an AVPlayerViewController and I do want to repurpose the screen real-estate taken up by the iPad video view)
At the end of the day, all I think I need is to manage to get
UIScreen.Screens.Length to be equal to 2 when I launch the app.
What's the secret of getting UIScreen to detect/report a second display?
When an app is launched with screen mirroring already enabled, the UIScreen.screens array initially only contains the device's screen. Shortly after launch, iOS posts a UIScreenDidConnect notification to advise your app that a second screen is connected.
What you will see at launch is that the captured property of your main screen is true if mirroring is enabled, however you can't actually access the second screen until after the notification is posted. Note that captured could also indicate that screen recording is in progress.
Although this seems slightly counter-intuitive it actually makes your coding a little simpler; you need to observe the UIScreenDidConnect and UIScreenDidDisconnect notifications anyway and now you don't need to write any special code to handle the case where the app is launched with a second screen already attached.
You can use something like this in your didFinishLaunching:
let nc = NotificationCenter.default
nc.addObserver(forName: NSNotification.Name.UIScreenDidConnect, object: nil, queue: nil) { (notification) in
print("Screen connected")
self.enableExternalDisplay()
}
nc.addObserver(forName: NSNotification.Name.UIScreenDidDisconnect, object: nil, queue: nil) { (notification) in
print("Screen disconnected")
self.disableExternalDisplay()
}
UPDATE
Actually, it looks like you have the key/value observing format of AddObserver in your code, when you actually want notification observing. Something like:
NSNotificationCenter.DefaultCenter.AddObserver(UIScreen.DidConnectNotification,OnScreenConnected)
And then you need to implement an OnScreenConnected method.
I've been working on a UWP application that will initially be deployed only to Surface Pro 4 (Maybe some SP3s) devices but I'm having a real difficult time getting my UI to fit on the screen.
Right now my Designer window is set to '12" Tablet (2160 x 1440) 150% Scale' with it locked in landscape mode (the only way this app will be used) so that the 'Effective: 1440 x 960' resolution is set.
I've got my MainPage page set to 960 x 1440 with a Frame for display content essentially filling the entire 960 x 1440 but when I run the app (either in full screen or windowed) it cuts off the content of my MainPage (not just the frame content but part of my app sidebar menu).
That all being said my question(s): How do I get my UWP to scale my content to fit inside what ever size window the app is displayed in when running (full screen or user adjusted window size), OR what settings do I need/How do I configure it to display my entire MainPage contents on my SP4 screen (2736 x 1824) in fullscreen without just trial/error adjusting elements manually until they fit.
I'm more concerned with the second question because I don't just want this app to do what I want (because I know I can figure it out myself by manually sizing elements) but I want to understand why it's doing what it's doing and the right way to go about doing what I want to do.
I did a lot of searching but could not find the answer to my question, if this is a duplicate please feel free to link the answer.
Thanks in advance.
The Designer just gives you a general guide on how things would look. The demensions are not for SP4 specifically.
At 150% DPI, try setting your MainPage to 1824, 1216.
You can call
ApplicationView.GetForCurrentView().VisibleBounds
at runtime to find how many pixels(epx) that your screen is currently set to.
Note that these are effective pixels. They are different from the physical pixels of the device. All UWP UI measurements are epx based. So when you see this -
<Button Width="24" />
You should know that the value 24 is measured in epx.
To find out what epx really is, give this a read.
I have designed a page with all asp.net controls which is well alligned in 1024*1024 resolution but in other resolution it gets misalligned..please help
if we cant change the resolution then please tell me what i have to do..
Are you seriously asking to modify the client's screen resolution from ASP.NET? No, you can't do this.
Explore your layout options. Look at relative CSS formatting (width: 80%; vs. width: 800px). At worst, discover the client's resolution and adjust.
From http://particletree.com/features/dynamic-resolution-dependent-layouts/
function getBrowserWidth(){
if (window.innerWidth){
return window.innerWidth;}
else if (document.documentElement && document.documentElement.clientWidth != 0){
return document.documentElement.clientWidth; }
else if (document.body){return document.body.clientWidth;}
return 0;
}
...
var browserWidth = getBrowserWidth();
if (browserWidth < 750){
// thin layout
}
else
{
// fat layout
}
You can't change the resolution and I am glad it is like that. I get annoyed when a page resizes the browser. If a page changed my screen resolution it would probably be the safest way to get me to never, ever again visit that site. In short: I think you are attacking the problem from the wrong angle.
What you need to do is to change your design. You cannot change the world to fit your needs, you will need to adopt your app to the world. So the solution is simple:
Run your app on a resolution where it looks bad
Find out exactly why it looks bad
Fix it (typically this will involve using %-based sizing instead of absolute units)
It's usually really not that hard to get a page flexible enough to work on screens ranging from, say 800x600 and upwards. If it looks a bit strange on a high-resolution monitor (such as 1920x1200) it is usually not a problem; when I use a resolution like that, I typically do not have the web browser maximized.
Google for how to design web sites for different resolutions. You should find plenty of information.
It sounds like your CSS is too inflexible. If you're trying to change the client's screen resolution, it's not gonna work.
the best way to perform this task is make multiple css for different screen resolutions and then use one according to that if you like the idea then i can give you the code sample for this i have implemented the same way and now silverlight gives more nice solution. you can look it in my blog. Hope it helps you.