The following:

<telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" width=100%></telerik:RadLinearGauge>

will result in the width being set as 100px

Workaround:

  1) Use   RenderAs="SVG".
  2)  Set 100% width to the gauge's wrapper prior the resizing
 
Use the solution below to make the control responsive:
     <table style="width: 100%;">
            <tr>
                <td>
                    <div style="width: 100%;" id="gauge"></div>
                    <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" RenderAs="SVG" Width="100%">
                        <Pointer Color="Gray" Size="10" />
                        <Scale Vertical="false" Min="0" Max="40">
                            <MinorTicks Size="20" />
                            <Ranges>
                                <telerik:GaugeRange Color="#D7E5D1" From="0" To="10" />
                                <telerik:GaugeRange Color="#EBE6D2" From="10" To="20" />
                                <telerik:GaugeRange Color="#F5D2D1" From="20" To="30" />
                            </Ranges>
                        </Scale>
                    </telerik:RadLinearGauge>
                </td>
            </tr>
        </table>
            <script type="text/javascript">
                var $ = $telerik.$;
                $(window).resize(function () {
                    $("#<%= RadLinearGauge1.ClientID %> > div")[0].style.width = "100%";
                    $find('<%= RadLinearGauge1.ClientID %>').get_kendoWidget().resize();

                });
            </script>

The scenario is the same web-page should render perfectly on all kind of devices(mobile, tablet, desktop, laptop, projector, and high-resolution TV etc.)

The Bar width is set using Size property for Minor tick. The Pointer Width is set using Size property of Pointer.

Now that the sizes for bar and pointers are fixed, we cannot change it with changing screen resolution.

SVG has the property for scaling itself based on the design size and actual size on the client (ViewPort Size).

If something like design width and design height property is added, it will be really helpful to scale the same control and use it on all kind of devices with resolutions ranging from 320 x 180 to 4K UHD displays.

Add a new property to HtmlChart as well as Gauges to AutoResize on parent control size change. A precondition to this is Height and Width of the control must be set in percentages of the parent control.

To implement this we can either use window.onresize or ResizeObserver.

Reference

Reference 2

Expose an additional property in RadGauge that controls the margin for the gaugeArea.

For the time being you can use the following workaround:

        <script>
            var pointerSize = 35;

            function pageLoad() {
                var gauge = $find("<%=rgEpmScorecard.ClientID%>");
                gauge._gaugeObject.options.scale.rangeSize = 25;
                gauge.repaint();
            }

        </script>
        <telerik:RadRadialGauge ID="rgEpmScorecard" runat="server" Skin="Metro" Height="99px" Width="100px">
            <Pointer Value="50" Color="Black">
                <Cap Size="0.5" Color="Black" />
            </Pointer>
            <Scale MajorUnit="10" Max="100" Labels-Visible="false" StartAngle="-45" EndAngle="225">
                <MajorTicks Visible="false" />
                <MinorTicks Visible="false" />
                <Ranges>
                    <telerik:GaugeRange Color="#ac1d23" From="0" To="16.67" />
                    <telerik:GaugeRange Color="#c26522" From="16.7" To="33.33" />
                    <telerik:GaugeRange Color="#d2b408" From="33.5" To="50" />
                    <telerik:GaugeRange Color="#b5be25" From="50.04" To="66.66" />
                    <telerik:GaugeRange Color="#0c833f" From="66.8" To="83.33" />
                    <telerik:GaugeRange Color="#0b6cb3" From="83.38" To="100" />
                </Ranges>
            </Scale>
        </telerik:RadRadialGauge>
        <script>

            var dataviz = kendo.dataviz,
                draw = dataviz.drawing,
                Path = draw.Path,
                DEFAULT_LINE_WIDTH = 0.5;

            kendo.dataviz.RadialPointer.fn._renderNeedle = function () {
                var that = this;
                var options = that.options;
                var minorTickSize = that.scale.options.minorTicks.size;
                var center = that.center;
                var needleColor = options.color;

                var needlePath = new Path({
                    fill: { color: needleColor },
                    stroke: { color: needleColor, width: DEFAULT_LINE_WIDTH }
                });

                needlePath.moveTo(center.x + that.radius - minorTickSize + pointerSize, center.y)
                          .lineTo(center.x, center.y - (that.capSize / 2))
                          .lineTo(center.x, center.y + (that.capSize / 2))
                          .close();

                return needlePath;
            }
        </script>

The underlying Kendo Linear Kendo stopped rendering the track in 2014.3.1314 and, respectively, so does RadLinearGauge as of 2015.1.225

For example, the following snippet should render a wide, green, semi-transparent track, but it does not

			<telerik:RadLinearGauge ID="gauge" runat="server" Height="280">
				<Pointer Value="20">
					<Track Color="#5ca038" Opacity="0.5" Size="30" />
				</Pointer>
			</telerik:RadLinearGauge>